Add HTML5 Video support to Drupal 7

There’s not much out there in terms of how to install video support for HTML5 video (mp4, ogv, webm, etc.) when using Drupal 7; so here’s my tutorial.

1. Install/enable the Video.js module
2. Add a field to content type
3. Modify field settings
4. Manage the content display
5. Upload files
6. Done!

Step 1 – Install/enable the Video.js module

Go to http://www.drupal.org/project/videojs to download the Video.js module. Install it, and then go to to Modules and enable it.

Step 2 – Add a field to content type

Create a new field in your new (or already existing) content type called “video”. Give it a data type of “file” and a form element type of “file” (this threw me off for a while).

Step 3 – Modify field settings

The next step involves setting the settings of our new field. First, make sure you allow the following file extensions: mp4, ogv, flv, webm

Next, scroll down and set the number of values to unlimited (so we can upload each video format for different browsers)

Step 4 – Manage the content display

Next, while still editing your content type, click Manage Display. Set the format of the Video field to Video.js : HTML5 Video Player and the label to “<Hidden>” (my preference).

Step 5 – Upload Files

The bulk of your work is done! Now, create a new piece of content that of that content type and upload 1 or more video formats (webm, ogv, mp4, flv). The module will pick whichever one is best fit for the browser

Step 6 – Done!

Enjoy your HTML5 video files in your Drupal 7 site!