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
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.
Formats In Depth
Video formats consists of three layers:
- The container format that wraps the audio and video codecs, but doesn't contain the raw data itself.
- The video codec which contains the actual, encoded video frames.
- The audio codec which contains the actual, encoded audio samples.
|Container||Video Codec||Audio Codec||File Extension|
Additional Encoding Info
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
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. Included in an .mp4, .webm and .ogv. Files are licensed under the Creative Commons Attribution 3.0 license for the Peach Open Movie Project, Big Buck Bunny.
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.
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".