In the previous section, we took a look at the basic HTML code required to play videos using the <video> tag, and how it was crucial to include multiple sources to allow play back through a number of different platforms. In this task, we are going to take a copy of that code and extend it, in preparation for developing our own player.
All you need for this task is your favorite text editor, and copies of the videos we converted earlier in this book—the rest will be added during the task.
- Create a new folder for storing your demo—call it
video demo. Open up the folder, and create the following new folders:js,css,media, andimages. - Crack open the text editor of your choice, and add in the following lines:
<!doctype html> <html> <head> <title>HTML5 Video Plugin Test</title> </head> <body> <video controls="controls" poster="trailer_480p.jpg"> <source src="media/trailer_480p.ogv" type="video/ogv" /> <source src="media/trailer_480p.mp4" type="video/mp4" /> <source src="media/trailer_480p.webm" type="video/webm" /> </video> </body> </html>
- Save this as
videoplayer.htmlin the root of thevideo demofolder—we now need to set up the basic framework ready for the jQuery plugin, so create a new blank document, add in the following lines, and save that document asvideoplayer.js. This will be used later in this section:(function($) { $.fn.oPlayer = function(options) { return this.each(function() { }); }; })(jQuery); - We also need to alter the HTML structure to add in the framework for customizing the controls—first, add in this (noting the addition of an ID for the video control):
<body> <div class="video_player"> <video controls="controls" id="mainvideo" poster="media/trailer_480p.jpg" > then alter the code accordingly: </video> <div class="custom_controls"></div> </div> </body>
If all is well, the browser will play the video when viewed in a browser using the inbuilt context menu controls.
We've taken a copy of the original HTML required to display videos using the HTML5 <video> tag and set it up with the names of the videos we will use, depending on which browser the page is viewed in. We've also created a blank template for the jQuery plugin that we will start to develop over this section. We've altered the code to allow for some changes that will be required for later tasks such as adding in the custom controls. You may also notice that there are no controls showing by default—this is because we've added in our own custom controls placeholder, but as there is nothing included within them, nothing will show!
