2010-02-03 09:59:46 +01:00
<!DOCTYPE html>
< html lang = "en" xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta charset = utf-8 / >
< title > HTML5 Demo: video< / title >
< style >
body {
font: normal 16px/20px Helvetica, sans-serif;
background: rgb(237, 237, 236);
margin: 0;
margin-top: 40px;
padding: 0;
}
article, section, header, footer {
display: block;
}
#wrapper {
width: 600px;
margin: 0 auto;
background: #fff url(images/shade.jpg) repeat-x center bottom;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
2010-03-02 23:21:15 +01:00
border-radius: 10px;
2010-02-03 09:59:46 +01:00
border-top: 1px solid #fff;
padding-bottom: 76px;
}
h1 {
padding-top: 10px;
}
h2 {
font-size: 100%;
font-style: italic;
}
header,
article > *,
footer a,
footer p {
margin: 20px;
}
footer > * {
margin: 20px;
color: #999;
}
article {
display: block;
position: relative;
}
< / style >
< / head >
< body >
< section id = "wrapper" >
< header >
< h1 > Video< / h1 >
< / header >
< article >
< video >
< source src = "dizzy.mp4" / >
< source src = "dizzy.ogv" / >
< / video >
< p id = "controls" >
< input type = "button" id = "play" value = "play" >
< span id = "position" > 00:00< / span > / < span id = "duration" > loading...< / span >
< / p >
< 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 >
< footer > < a href = "/" > HTML5 demo< / a > < / footer >
< / section >
< script src = "h5utils.js" > < / script >
< script >
var video = document.querySelector('video'),
togglePlay = document.querySelector('#play'),
position = document.querySelector('#position'),
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);
// 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 >
< script >
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
< / script >
< script >
try {
var pageTracker = _gat._getTracker("UA-1656750-18");
pageTracker._trackPageview();
} catch(err) {}< / script >
< / body >
< / html >