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.
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.
The VideoJS module aims to help you get video to the widest number of users in the simplest way.
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:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
AddType video/x-flv .flv
For testing, I used three formats of the Big Buck Bunny open source video:
Credit to Longtailvideo.com for providing these files with their player.