CHAPTER 11 â– HTML5
â– Note If you need sample files to work with, you can download them along with the source code for this book from http://www.friendsofed.com.
Start by creating a simple HTML page called movie.html that includes a <video> element with a movie in the appropriate formats we saw earlier. Also include a player.css stylesheet and a player.js script: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Video</title> <link rel="stylesheet" href="styles/player.css" /> </head> <body> <div class="video-wrapper"> <video id="movie" controls> <source src="movie.mp4" /> <source src=" movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> <p>Download movie as <a href="movie.mp4">MP4</a>, <a href="movie.webm">WebM</a>, or <a href="movie.ogv">Ogg</a>.</p> </video> </div> <script src="scripts/player.js"></script> </body> </html> In the player.js file we're going to alter any <video> elements on the page by removing the built-in controls and then adding our own Play button. Add the following complete functions to the player.js file: function createVideoControls() { var vids = document.getElementsByTagName('video'); for (var i = 0 ; i < vids.length ; i++) { addControls( vids[i] ); } } function addControls( vid ) { vid.removeAttribute('controls'); vid.height = vid.videoHeight; vid.width = vid.videoWidth; vid.parentNode.style.height = vid.videoHeight + 'px';
217