Throughout this section, we've had a look at the code required to produce a basic HTML5 video player on a web page as well as the options available for configuring the player. For this task and the next, we are going to look at a couple of examples of pre-built players that are available for download from the Internet - namely VideoJS and Kaltura. Both are open-source applications, and are available at no cost.
For this, we don't actually need to download any files—VideoJS is one of those rare players that is available on a Content Delivery Network (CDN); it is enough to link to the files for the purpose of this task.
- Crank up your text editor and add the following code snippet:
<!doctype html> <html> <head> <title>HTML5 Video Test</title> </head> <body> </body> </html>
- Let's begin adding in the JavaScript library and CSS calls in your
<head>tags:<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script>
- The bulk of the code required to run the player is very similar to the code we've used throughout this section—the differences have been highlighted:
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="720" height="400" poster="trailer_480p.jpg" data-setup="{}"> <source src="trailer_480p.mp4" type='video/mp4'> <source src="trailer_480p.webm" type='video/webm'> </video>
If all is well, you will have a video playing similar to the following screenshot:
The player uses very similar code to that we've used throughout this section—the styling however has been customized using additional CSS and JavaScript (similar to what we will see in the next section). This means that a consistent style can be used throughout most (if not all) platforms, which is infinitely preferable to the mix of styles you will otherwise see if you are not using the same styles on all platforms! The added benefit here is that because the JS and CSS files are hosted on a CDN, you don't need to worry about updating the code as this is done for you automatically. The code can also be downloaded separately if you prefer to host it locally.
Tip
If you want to try out a few designs, visit http://www.kaltura.org/apis/html5lib/kplayer-examples/Player_Themable.html—this has a standalone player linked to jQuery UI's ThemeRoller, where you can choose different styles. Note: if you change to a different theme in the gallery, give it about five seconds to refresh the screen before continuing