HTML 5 Video File Formats and Encoding

Note: Many issues with playback using the MediaFront module are usually due to improperly formatted/encoded files. Please take the time to learn how to properly format and encode your files.

See HTML 5 Audio File Formats and Encoding for audio specific information

Introduction

Different browsers/devices do not support the same media formats in their implementations of HTML 5 video. This due to mainly patent issues, open-source vs. proprietary and disagreement over which is the "best" format.

To make your video work in the latest versions of all major browsers, you will need to serve your video in both WebM format and MP4 format. To guarantee the broadest range of browser/device compatibility you may also need to include the Ogg format.

WebM: Firefox 4+, Chrome and Opera 10.6+
MP4: Internet Explorer and Safari
Ogg: Firefox 3.5+, Opera 10.5+

View a complete Browser Compatibility table.

Test how well your device/browser supports HTML5 Video

Formats In Depth

Video formats consists of three layers:

1. The container format that wraps the audio and video codecs, but doesn't contain the raw data itself.
2. The video codec which contains the actual, encoded video frames.
3. The audio codec which contains the actual, encoded audio samples.

Additional Encoding Info

MPEG-4 (.mp4)

H.264 and AAC support different levels of encoding profile. For H.264, use the Baseline profile. For AAC, use the LC (Low Complexity) profile.

The MOOV atom (which contains the seeking information) needs to be located at the beginning of the file.

MediaFront Supported Formats

MediaFront supports a range of file formats for playback of video on your website. However, MediaFront does not decode the media files itself. Instead, it relies upon the browser (in HTML5 mode), the Flash plugin (in Flash mode).

MediaFront will figure out which rendering mode to use on which browser/device for your files.

The 7.x-2.x version of MediaFront supports the playback of the following video file formats:

mp4, m4v, mov, flv, f4v, ogg, ogv, wmv, vp6, vp5, mpg, avi, mpeg and webm

Troubleshooting

Make sure to test your video playback in multiple browsers, Operating Systems and devices to see if you can replicate the issue you are having before proceeding. Isolating which browser, OS and device that are causing the issues will aid in determining which solution might be best.

Download properly encoded sample video files to use for testing purposes. Files are licensed under the Creative Commons Attribution 3.0 license for the Peach Open Movie Project, Big Buck Bunny.

• Files on GitHub: .flv, .mp4, .ogv, .webm
• Zip folder: .mp4, .webm, .ogv

Issue: The player doesn't play your files.

Solution: The mimetype is likely set incorrect or not at all on your server. The mimetype must be set, or HTML5 browsers refuse to play the files.

Read:
Setting mime types in Apache
Setting mime types in Windows IIS
Setting mime types using cPanel

Issue: You cannot seek (i.e. Jump forward and back) using an MP4 file before it completely downloads.

Solution: The MOOV atom (which contains the seeking information) may be located at the end of your video.

MP4 files have an index in the file that tells the browser/device/player the specific location of where in the file the video and audio frames are present. This index is contained in what is called a 'moov' atom in the file.

How do I quickly see where the MOOV atom is located in my file?

Open the file in any simple text editor. TextEdit in Mac or Notepad in PC. Press cmd + F (Mac) or ctrl +F (PC) and search for 'moov'. It will either be at the beginning of the file or the end.

How to do make sure my file is exported with the MOOV atom at the beginning of the file?

In Handbrake make sure to check off "Web Optimized".
In iMovie "Prepare for Internet Streaming" must be set to "Fast Start".