What's everyones opinion on media embedding?
For example posting a youtube video link, or a picture link and either a thumbnail or viewable item is shown?
Example from Discourse: http://try.discourse.org/t/what-is-your-favorite-ted-video/97/3
Vid embedding good. Everyone wants it anyway. Way we do it over at CEMB is to have a preview image that plays the vid when clicked. Saves loading heaps of flash all at once in video threads (music threads, etc).
Pictures: already sorted. Have been for ages. No ned to change anything, IMO.
+1
This is the code we're using, just to give a general idea. It's 1.1.x but running jQuery. The inline styles on the embed tags auto-resize the vids for any screen (you can watch them on a 240 wide phone if you're daft enough).
function getSettingsLink()
{
var storage = window.localStorage;
if (!storage) return null;
var tag = $('<span> (<a href="">Settings</a><span>Embedding: <select></select>\
</span>)</span>'), opts = [0,5,10,20,35,1000];
tag.find(">a").click(function _(e){
e.preventDefault();
var $t = $(this).text("").unbind("click", _);
if (!storage)
$t.after(' “Web Storage” is unsupported by your browser');
else
$t.next().show();
});
tag.find(">span").hide();
var sel = tag.find("select").change(function(){
storage.embed_nr = opts[$(this).find("option:selected")[0].value];
});
var nr = Number(storage.embed_nr || 5), opt = $.inArray(nr, opts);
$(['Only preview images','Max. 5/page','Max. 10','Max. 20','Max. 35','All'])
.each(function(i, e){sel.append('<option value="'+i+'"'+(i==opt?' selected="true"':"")+'>'+e+'</option>')});
tag.max = nr;
return tag;
}
(window.$ && $(function linkifyVideos() {
var domain_rx = /([\w-]+\.\w+)\/(.+)$/;
var embed_html = '<embed width="640px" height="385px" style="max-width: 98%; max-height: auto;" allowscriptaccess="never"\
allowfullscreen="true" quality="high" wmode="transparent" src="{src}"\
type="application/x-shockwave-flash"/>';
function getEmbed(s){return embed_html.replace('{src}',s)}
function showFlash(tag, eURL){$(tag).replaceWith(getEmbed(eURL))}
function getIMG(a, src, eURL, eURLa, sF)
{
sF = sF || showFlash;
return $('<a href="'+a.href+'" style="display: block; width: 480px; max-width: 98%; height: auto; max-height: auto;"><img alt="Preview image" '+
'title="Click to play or double-click to load." class="YouTube_vid" src="'+src+'"/></a>')
.dblclick(function(e) {
e.preventDefault();
clearTimeout(this.tID); // Prevent single click.
sF(this, eURL);
}).click(function(e) {
e.preventDefault();
t = this;
t.tID = setTimeout(function(){sF(t, eURLa)}, 200);
});
}
function embedOrIMG(emb, a, src, eURL, eURLa)
{ eURL='http://'+eURL; return emb ? getEmbed(eURL) : getIMG(a, 'http://'+src, eURL, 'http://'+eURLa); }
var handlers = {
'youtube.com' : function(path, a, emb) {
var vID = path.match(/\bv[=/]([^&#?$]+)/i) || path.match(/#p\/(?:a\/)?[uf]\/\d+\/([^?$]+)/i);
if (!vID || !(vID = vID[1])) return;
var embedURL = 'youtube.com/v/'+vID,
tag = embedOrIMG(emb, a, 'img.youtube.com/vi/'+vID+'/0.jpg',
embedURL, embedURL+'&autoplay=1');
return ['YouTube Video:', tag];
},
'google.com' : function(path, a, emb) {
var vID = path.match(/\bdocid=([^&#$]+)/i);
if (!vID || !(vID = vID[1])) return;
var embedURL = 'video.google.com/googleplayer.swf?fs=true&docid='+vID,
tag = embedOrIMG(emb, a, 'www.google.com/images/video_logo.png', //gvt0
embedURL, embedURL+'&autoplay=1');
return ['Google Video:', tag];
},
'vimeo.com' : function(path, a, emb) {
var vID = path.match(/^(\d+)/i);
if (!vID || !(vID = vID[1])) return;
var embedURL = 'vimeo.com/moogaloop.swf?clip_id='+vID,
tag = embedOrIMG(emb, a, 'assets.vimeo.com/images/logo_vimeo_land.png',
embedURL, embedURL+'&autoplay=1');
return ['Vimeo Video:', tag];
},
'soundcloud.com' : function(path, a, emb) {
if (!/\/+./.test(path)) return;
var embTag = '<embed height="81" type="application/x-shockwave-flash"\
width="100%" src="http://player.soundcloud.com/player.swf?url='+a.href+'"\
/>';
var tag = emb ? embTag : getIMG(a,
'http://soundcloud.com/images/soundcloud-logo-sc.png', '', '',
function(tag, url){$(tag).replaceWith(embTag)});
return ['SoundCloud:', tag];
}
};
//handlers['google.co.uk'] = handlers['google.com'];
var links = $('#quickModForm a'); // Get the links in the postings.
var settings = getSettingsLink() || $("");
var closebtn = $(' <a title="Close video">(X)</a>').click(function() {
$(this).next().next().remove(); });
var embed_nr = window.localStorage ? localStorage.embed_nr : 5;
for (var i=links.length-1; i > -1; i--)
{
var tag = links;
if ("quote;signature".indexOf(tag.parentNode.className) != -1)
continue; // Ignore in quotes.
var text = tag.innerText || tag.textContent || "";
if (tag.href == "" || tag.href.indexOf(text) != 0) // == -1
continue; // No href attr, or inner text not equal to href attr.
if ((m = tag.href.match(domain_rx)) && // Get domain.
(handler = handlers[m[1]]) && // Is there a handler for this domain?
(args = handler(m[2], tag, embed_nr > 0))) { // Call the handler.
--embed_nr;
$(tag).text(args[0]).before("<p></p>")
.after(settings.add(closebtn).clone(true), "<br/>", args[1], "<br/>");
}
}
}));
// End of code by Aziz
Definitely nice with the image of the actual video :)
Yeah the only catch is it wont pull the vid title, but in practice that's not an issue. Usually people will give an indication of what they're posting anyway.
You can try it out here: http://www.councilofexmuslims.com/index.php?topic=17938.1920
It was your site I seen it on :D
You do have a damn good mobile theme too, especially once on the forum.
Yeah that's coming along nicely. I still have to sort the profile pages, but most of the rest is pretty good. Once the code is optimised (minified everything, deferred js parsing) the load times should go down too. At the moment it's a rocket on desktop but a tad slow on mobile.
ETA: Oh and weird bugses with some positioning in older Android and iOS, but TBH I don't know if I can be bothered reliving the IE6 era when phones turn over so quickly. New versions are all good.
Well I took some time on this one and now have some javascript which does the embedding, right now only works with youtube and vimeo but others could be added. I used some of the ideas in the code that Ant posted for 1.1, but made quite a few changes so it worked with elk, and also removed some things (the settings thing in the above code)
What it does:
After the page loads it searches the msg_ divs for links, and for links that it recognizes and can parse (youtube, vimeo) it gets the video thumbnail and inserts that in the page in place of the link. Clicking on the image will cause it to embed the video in the page. Doing it this way is a little less overhead then embedding it from the start.
Questions are:
1) other video providers to add? Don't want to go nuts here.
2) instead of link searching do we want to do this a a bbc tag .. somethign like wrapping it in [video]link[/video], it would still only work on the sites in the script
3) admin interface for on/off ?
other video providers : dailymotion and liveleak. can facebook video be embedded too?
most of videos can be found in youtube, if not dailymotion and liveleak will do.
1) youtube is must-have, all others IMHO optional.
2) I'd vote for no. link searching and auto-embedding is perfectly fine.
3) yes please
I've made some basic css div wraps (probably to many sorry Ant) around the video, they can be styled as required. Next I'll add in the ACP on/off switch, which will just load, or not, the embed JS.
Good since thats what we have now :D ... plus doing the bbc wrap is just more work for no real benefit I think.
I'll take a look at dailymotion since its a big player but pass on liveleak , I don't want to add to many in the core since its one of those maintenance items, Others can be added by addon writers as desired.
I like Ant's idea of the preview image that doesn't load the flash until you click.
Wasn't my idea. Aziz thought it up and coded it originally. Anyway yes, click to play.
Glad you like that idea since
Thats what you have ;)
/me has seen a branch merged a few moments ago
/me thinks this is done now, right? O:-)
Its done! :D ... (although I have a quick update in a fixin branch (off is on and on is off with the ACP)
lol
But that's a bug! :P
Hi, I don't think my question warrant a new topic. :)
Is the normal behaviour of media embedding is not enabled if inserted in quote?
Yes,
Links inside of quotes are not rendered. That same is true for links in signatures.
If you wanted to change that you would have to edit the elk_jquery_embed.js, look for // Ignore in quotes and signatures in that file ;)
Thanks! Nah... not gonna enable it, I can see why it disabled. :) Just curious is it the intended behaviour.
Great feature. Many will love this.
How about embedding arbitrary streamable http links?
I'm not sure it would be easy to automatically detect arbitrary streamable urls.
Well, that would mean that they should be supplied with a BBC tag. Possibly separate video and audio tags.
I'd use a bandwidth limiter app or something like that.
Video/audio embedding doesn't necessarily mean auto-play. ;)
Facebook is doing auto play. Hate it.
Note that I never meant for auto play to happen for any video I embed. Just an option of playing it, for when the browser a user is viewing the page with will simply force them to pre-download the entire video and play it locally.