c3d2-web/content/static/datenspuren/2011/script/play-resources.js

50 lines
1.2 KiB
JavaScript

/**
* Partially from http://diveintohtml5.org/everything.html
*
* But we don't want audio/* as <video>
*/
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 = $('<video controls="controls" autoplay="autoplay"></video>');
sources.forEach(function(source) {
var src = $('<source></source>');
src.attr('src', source.href);
src.attr('type', source.type);
video.append(src);
});
img.replaceWith(video);
});
}
});
});