<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<meta charset="utf-8"/>
<meta name="viewport" content="width=620"/>
<title>HTML5 Demo: Video</title>
<!--<link rel="stylesheet" href="/css/html5demos.css" type="text/css">-->
<!--<script src="/js/h5utils.js"></script>--></head><body>
<section id="wrapper">
    <header>
      <h1>Video &copy;</h1>
    </header>
<article>
  <video tabindex="0">
    <source src="assets/dizzy.mp4"/>
    <source src="assets/dizzy.ogv"/>
  </video>
  <p id="controls">
    <input id="play" value="play" type="button"/>
    <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>
<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>
    <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/</footer> 
</section>
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0pt; left: 0pt; border: 0pt none;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"/></a>
<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 src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script>
try {
var pageTracker = _gat._getTracker("UA-1656750-18");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>