2010-03-04 13:07:09 +01:00
< title > Video< / title >
< article >
< video >
2010-06-09 16:21:57 +02:00
< source src = "assets/dizzy.webm" / >
2010-03-04 13:18:09 +01:00
< source src = "assets/dizzy.mp4" / >
< source src = "assets/dizzy.ogv" / >
2010-03-04 13:07:09 +01:00
< / video >
< p id = "controls" >
< input type = "button" id = "play" value = "play" >
< span id = "position" > 00:00< / span > / < span id = "duration" > loading...< / span >
< / p >
2010-06-09 16:23:22 +02:00
< p > Video loaded: < span id = "using" > loading...< / span > < / p >
2010-03-04 13:07:09 +01:00
< p > Note that (at time of writing) < a href = "http://webkit.org/" title = "The WebKit Open Source Project" > Webkit nightly< / a > supports full screen mode, which will add a button above.< / p >
< / article >
< script >
var video = document.querySelector('video'),
togglePlay = document.querySelector('#play'),
position = document.querySelector('#position'),
2010-06-09 16:23:22 +02:00
using = document.querySelector('#using'),
2010-03-04 13:07:09 +01:00
ready = false,
controls = document.querySelector('#controls'),
fullscreen = null;
addEvent(togglePlay, 'click', function () {
if (ready) {
video.playbackRate = 0.5;
if (video.paused) {
if (video.ended) video.currentTime = 0;
video.play();
this.value = "pause";
} else {
video.pause();
this.value = "play";
}
}
});
addEvent(video, 'timeupdate', function () {
position.innerHTML = asTime(this.currentTime);
});
addEvent(video, 'ended', function () {
togglePlay.value = "play";
});
addEvent(video, 'canplay', function () {
video.muted = true;
ready = true;
document.querySelector('#duration').innerHTML = asTime(this.duration);
2010-06-09 16:23:22 +02:00
using.innerHTML = this.currentSrc;
2010-03-04 13:07:09 +01:00
// note: .webkitSupportsFullscreen is false while the video is loading, so we bind in to the canplay event
if (video.webkitSupportsFullscreen) {
fullscreen = document.createElement('input');
fullscreen.setAttribute('type', 'button');
fullscreen.setAttribute('value', 'fullscreen');
controls.insertBefore(fullscreen, controls.firstChild);
addEvent(fullscreen, 'click', function () {
video.webkitEnterFullScreen();
});
}
});
function asTime(t) {
t = Math.round(t);
var s = t % 60;
var m = Math.round(t / 60);
return two(m) + ':' + two(s);
}
function two(s) {
s += "";
if (s.length < 2 ) s = "0" + s ;
return s;
}
< / script >