62 lines
1.8 KiB
JavaScript
62 lines
1.8 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);
|
|
var type;
|
|
if ((type = a.attr('type')))
|
|
sources.push({ href: a.attr('href'), type: type });
|
|
});
|
|
|
|
|
|
/* Check playability */
|
|
if (sources.map(function(r) {
|
|
return r.type;
|
|
}).some(canPlayVideo)) {
|
|
var img = that.find('img');
|
|
img.before('<p class="play">▶</p>');
|
|
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 video = $('<video class="video-js vjs-default-skin" controls="controls"></video>');
|
|
video.attr('poster', poster);
|
|
sources.forEach(function(source) {
|
|
var src = $('<source></source>');
|
|
src.attr('src', source.href);
|
|
src.attr('type', source.type);
|
|
video.append(src);
|
|
});
|
|
img.replaceWith(video);
|
|
new VideoJS(video[0], { width: 680,
|
|
height: Math.floor(3 * 680 / 4) }).play();
|
|
});
|
|
}
|
|
});
|
|
$('head').append(
|
|
'<script src="script/video-js/video.min.js" type="text/javascript" charset="utf-8"></script>' +
|
|
'<link rel="stylesheet" href="script/video-js/video-js.min.css" type="text/css" media="screen" title="Video JS" charset="utf-8">'
|
|
);
|
|
});
|