How to play mp4 video all major browsers?

Question

Is there any way to make .mp4 video work in all major browsers? I heard that videojs can help me but I am not sure. Will this library automatically set the flash as a callback if the video format is not supported for the browser? Has any used it before? Please help.

Answer 1

At one level you could probably say that mp4 will already work in most major browsers, but, unfortunately, things are not that simple.

mp4 is a 'container' and the video and audio in it may be encoded with various codecs which you will need to check your browser supports (most support h.264) and even the same codec using different settings (e.g. baseline vs mainline profiles).

There are also techniques to move the metadata to the start of the mp4 file to allow it stream immediately before the whole file has downloaded - without this it may appear that your video will not play (or it may even not play). See: http://multimedia.cx/eggs/improving-qt-faststart/

In fact it is probably possible to create an mp4 which will not play in any major browser.

As Keizom say's best current practice is to provide multiple sources of a video in formats that are known to work with current major browsers.

It's also worth nothing that the playing field keeps changing as browsers and video format evolve - for example a video player which used or fell back to Silverlight just a short time ago will now no longer work on some of the most popular browsers as they no longer support Silverlight.

To see the current picture you need to check some of the sites that are updated regularly in line with browser changes. Two good examples are:

• http://camendesign.com/code/video_for_everybody/test.html
• https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

You can still achieve this while allowing your users to upload just one format (this is what popular video hosting site do). You simply need to convert their uploaded video into the minimum set of formats you need to support the browser set you want to hit.

Note that if you are worried about quality of playback on different devices and with different network conditions then you may actually have to provide multiple bit rate versions of each video format (so the client can switch between bit rates as network conditions change).

Of course, this makes your server side more complicated and also uses a fair amount of computing power, so you need to decide if your use cases justifies this investment/effort.

Answer 2

Whether the .mp4 will "work" or not depends on the OS & browser. Cross-OS/browser support is achieved by supplying multiple sources.

<video>
    <source src="foobar.mp4" type="video/mp4" />
    <!-- some other alternative sources -->
    <source src="foobar.ogv" type="video/ogv" />
</video>