HTML5 is growing in popularity, and one of the best things about it is the video capabilities. There are a slew of benefits in contrast to flash (which I won’t get into now) and its good to see some great projects like VideoJS. This is a simple and easy to use JavaScript library that you can easily embed and customize to get a lightweight alternative to bulky, complicated flash that may not display on all mobile devices.
Who?
What?
So what does this plugin do? I think the best thing is to give the description given by the author:
VideoJS is an HTML5 Video Player with 3 core parts: An embed code (Video for Everybody), a JavaScript library (video.js), and a pure HTML/CSS skin (video-js.css).
Using Video for Everybody as the embed code means you know it’s compatible with many devices (including ones without JavaScript).
One of the best thing about this plug-in was its flexibility as well the impressive list of extensions, that makes it very portable and easy to use on almost any web project.
To add to that the video quality was crisp, and there was also the ability degrade gracefully and fall-back to flash in cases where HTML5 was not supported and default when flash was not present.
However, the fact that you can also freely change the appearance of the player using CSS alone means that this is the thing that really give it great appeal. This can be done using “Skins” and they allow you to make the player look like Youtube, Vimeo, hulu or any other high-end player by simply including a style sheet and modifying a line of code.
*Demo*
Below is a working example of what the video player and feels looks like but be sure to check out the other demo’s on the main VideoJS site.
[video mp4="http://video-js.zencoder.com/oceans-clip.mp4" ogg="http://video-js.zencoder.com/oceans-clip.ogg" webm="http://video-js.zencoder.com/oceans-clip.webm" poster="http://video-js.zencoder.com/oceans-clip.png" preload="true" width="560" height="280"]
Features
- Free & Open Source
- Lightweight. NO IMAGES USED
- 100% skinnable using CSS
- Library independent
- Easy to use
- Easy to understand & extend
- Consistent look between browsers
- Supports Multiple Browsers: Firefox, Safari, Chrome, Opera, IE9
- Fall-back for older Browsers: IE6, IE7, IE8
- Support for Mobile devices: Android, ipad, iphone, ipod
- Full Screen & Full Window Modes
- Volume Control
- Forced fall-back to Flash (even when there is an unsupported source)
- jQuery plugin
- CMS plugins/modules: Drupal, Joomla, WordPress, Umbraco
Bonus Feature: Embed Builder
Adding the needed embed code is not always a piece of cake, so fortunately VideoJS has a nifty tool that you have use to easily generate the markup that you need.
How?
1. Download the VideoJS library files and include the needed css and js file
<head>
...
<script src="video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
...
</head>
2. With the JavaScript and style sheet loaded add in the code to initialize the video player.
<script type="text/javascript" charset="utf-8">
// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();
</script>
3. Finally add in the markup for the plug-in. It is not that hard but fortunately there is the Embed Builder where you can easily, cut, paste and click to get the sample code below.
<!-- Begin VideoJS -->
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video class="video-js" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
<!-- Download links provided for devices that can't play video in the browser. -->
<p class="vjs-no-video"><strong>Download Video:</strong>
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
<!-- Support VideoJS by keeping this link. -->
<a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
</p>
</div>
<!-- End VideoJS -->
Conclusion
In three steps you can easily add an HTML5 video player to your website or blog. If you are looking to create a dynamic application or mere have a more cross browser, and mobile friendly video player then VideoJs is definitely worth a look.
Anyone who has ever had to embed any of the popular open source and commercial players know changing the look and feel may not be all that easy, and also costly in some cases. There are also restrictions in exactly how much control you would have on the interface of the flash and so give this a try.