/** * Partially from http://diveintohtml5.org/everything.html * * But we don't want audio/* as */ function canPlayVideo(type) { var v = document.createElement('video'); return !!(v.canPlayType && v.canPlayType(type).replace(/no/, '') && !(/^audio\//.test(type))); } $(document).ready(function() { /* Iterate over all resources in HTML output */ $('.resource').each(function() { var that = $(this); var preview = that.data('preview'); var sources = []; that.find('a').each(function() { var a = $(this); sources.push({ href: a.attr('href'), type: a.attr('type') }); }); /* Check playability */ if (sources.map(function(r) { return r.type; }).some(canPlayVideo)) { var img = that.find('img'); img.before('▶'); var poster = img.attr('src'); var isPreview = false; that.find("img, .play").mouseover(function() { img.attr('src', preview); }). mouseout(function() { img.attr('src', poster); }). click(function() { that.find(".play").remove(); var box = $(''); var video = $(''); video.attr('poster', poster); sources.forEach(function(source) { var src = $(''); src.attr('src', source.href); src.attr('type', source.type); video.append(src); }); box.append(video); img.replaceWith(box); VideoJS.setup(video); }); } }); $('head').append( '' + '' + '' ); });
▶