/** * 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'); var poster = img.attr('src'); img.mouseover(function() { img.attr('src', preview); }); img.mouseout(function() { img.attr('src', poster); }); img.click(function() { var video = $(''); sources.forEach(function(source) { var src = $(''); src.attr('src', source.href); src.attr('type', source.type); video.append(src); }); img.replaceWith(video); }); } }); });