| <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 ©</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> |
