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.
- Install/enable the Video.js module
- Add a field to content type
- Modify field settings
- Manage the content display
- Upload files
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!