HTML5 Video for Drupal With VideoJS

HTML5 video is a new standard being talked about a lot lately that allows you to add videos to your site without the need for plugins. Videos added properly using the HTML5 standard play in the users browser without any additional software.

Since the standard isn't set in stone, HTML5 Video right now is kind of a moving target.

Video on the web currently is synonymous with Adobe's Flash, except for ios devices, which do not support flash.

VideoJS is a module available right now for Drupal 6 that lets you implement this new standard in your Drupal site. It is a very simple module to use and enable and only requires CCK and Filefield to work.

In order to support HTML5 video with the the big five browsers: (Firefox, Internet Explorer, Safari(Webkit-ios), Chrome, and Opera), you need to have at least three versions of your video present on your site: An MP4 to support Safari and an OGV for Firefox, Chrome, and Opera, and an FLV for Internet Explorer. Your MP4 needs to also be encoded using the H.264 codec.

Incidentally, in January of 2011, Google announced it is changing native browser support from OGV to WebM

The VideoJS module aims to help you get video to the widest number of users in the simplest way.

The module contains a javascript player that is customizable through css as well, giving you full control over the presentation of your player.

Here is what you need to do to use it:

• Download the module
• Install it as usual in /sites/all/modules

  

• You will need CCK and Filefiled. Download and install them as well.

  

  

• If you want flash fallback, you'll need Flowplayer as well.
• Enable CCK, Filefield, and VideoJS
• Create a new content type and name it whatever you like.
• Add a file upload field and allow three types: MP4, OGV, and FLV

  

  

• Change your display for the field to "VideoJS HTML5 Video Player"

  

Now that you have your new content type, create a new video content and add your three files.

After saving your content, preview it in different browsers and notice how quickly it loads and integrates.

VideoJS can also be used more extensively with the Video module.

If you find that you are unable to play the videos, you may want to check your .htaccess file and make sure you have the correct Mime-Type specified by adding an entry to your .htaccess:

This module is under constant development. You should check the VideoJS Issues and Bugs pages to make sure you are up to date.

EDIT 2-19-11

For testing, I used three formats of the Big Buck Bunny open source video:

The MP4, WEBM, OGV, and FLV files are available on my Github account.

Credit to Longtailvideo.com for providing these files with their player.