Adding the HTML5 video player code

HTML5 Video Encoding and Serving

With HTML5 and the introduction of the video tag, web authors are now able to take advantage of the recent advances in media encoding. These video codecs allow for significantly improved compression with less visible fragmentation. The Internet's ever increasing demand for video content such as Movie and Television show rental, YouTube and video game streaming services such as Twitch.tv are pushing internet bandwidth more and more every month.

All of this new traffic has added incentive to several companies to create ever more efficient video CODECs to both reduce server and traffic load while at the same time increase the number of devices that are able to consume content. With the standardization on a smaller number of CODECs, hardware manufacturers are also able to begin adding hardware accelerated decoding to new devices.

In the Web Browser world, Mozilla, Google and Opera have standardized on Google's freely licensed VP8 based webm and also the OGG Theora containers, while Internet Explorer and Apple Safari use the MP4 container format with the MPEG-4 AVC (Audio Video CODEC). It is important to note that while in the meantime, it is good practice to ensure that there is an MPEG-4 version of any videos available to stream to Apple devices.

Making use of the video tag is very easy, especially when compared to the complex embed code required when attempting to embed videos with Flash. Using video is a easy as this player code:

<video controls preload=metadata width=1280 height=720 poster=‘media/samplevideo.jpg'>
    <source src='media/samplevideo.mp4' type=‘video/mp4'>
    <source src='media/samplevideo.webm' type=‘video/webm'>
    <source src='media/samplevideo.ogg' type=‘video/ogg'>
    <p>Please use a modern browser to view this video.</p>
</video>

What you see above is the "samplevideo" resource being loaded with playback controls, it preloads the metadata as soon as the page loads, the dimensions set to 1280x720 pixels and a poster with samplevideo.jpg loading in place of the video. To cover all of the different browsers and devices the video stanza contains a list of available files. The browser will work down the player tag code until it finds a source that it understands.

If you are in the process of adding video into your website and you are not using a major CRM or blogging system such as WordPress, you will need to ensure that you test each of the video types to verify that your web server is configured correctly. If there is no MIME Type configured Apache and Nginx are known to have problems serving HTML5 video formats.

To correct this either edit the master configuration files, or if you don't have access (or only want per directory video serving), you can add the following lines to the .htaccess file for the directory which you are serving the media from.

For Apache:

AddType video/webm .webm
AddType audio/webm .weba
AddType video/ogg .ogv
AddType audio/ogg .ogg
AddType video/mp4 .mp4
AddType audio/mp4 .m4a
AddType audio/mpeg .mp3

For Nginx (in /etc/nginx/mime.types):

types { 
... audio/webm weba;
video/webm webm;
video/mp4 mp4;
audio/mp3 mp3;
video/ogg ogv;
audio/ogg ogg;
}

Once you have the MIME types configured your server should no longer have any issues serving up content to your users.

All you have to do now is to (re-)encode your video assets with the easy and powerful Easy HTML Video application for Windows and Mac OS X. Easily encode to multiple formats in a single operation includes MP4 (low-res optional), webm, OGG and even your fallback, Adobe Flash. Check it out at http://easyhtml5video.com