Skip to main content
Topic: Thoughts on media embedding? (Read 15197 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Thoughts on media embedding?

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

Re: Thoughts on media embedding?

Reply #1

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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Thoughts on media embedding?

Reply #2

+1
Success is not the result of spontaneous combustion, you must set yourself on fire!

Re: Thoughts on media embedding?

Reply #3

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).

Code: [Select]
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+'&amp;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&amp;docid='+vID,
      tag = embedOrIMG(emb, a, 'www.google.com/images/video_logo.png', //gvt0
      embedURL, embedURL+'&amp;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+'&amp;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
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Thoughts on media embedding?

Reply #4

Definitely nice with the image of the actual video :)

Re: Thoughts on media embedding?

Reply #5

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
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Thoughts on media embedding?

Reply #6

It was your site I seen it on :D


You do have a damn good mobile theme too, especially once on the forum.

Re: Thoughts on media embedding?

Reply #7

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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Video Embeding

Reply #8

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 ?

Re: Thoughts on media embedding?

Reply #9

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.
192.MY.ID: Forum ISP Indonesia.

Re: Thoughts on media embedding?

Reply #10

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
Thorsten "TE" Eurich
------------------------

Re: Thoughts on media embedding?

Reply #11

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.

Quote2) I'd vote for no. link searching and auto-embedding is perfectly fine.
Good since thats what we have now :D ... plus doing the bbc wrap is just more work for no real benefit I think.

Quotedailymotion and liveleak
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.

Re: Thoughts on media embedding?

Reply #12

I like Ant's idea of the preview image that doesn't load the flash until you click.


Re: Thoughts on media embedding?

Reply #14

Wasn't my idea. Aziz thought it up and coded it originally. Anyway yes, click to play.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P