[SOLVED] My Web Browser CANNOT Play HTML5 MP4 Video! Why? How do I fix it?

Amazon Let's say you have an MP4 video file and you'd like to put it on your website so that any web browser can play the MP4 video. You use the HTML5 syntax and the HTML5 markup looks something like this:

<video autoplay loop muted controls>
  <source src="my-video.mp4" type="video/mp4">
</video>

You go to your website with your favorite web browser, and lo and behold, the web browser cannot play it! In my case, the video could not play in Chrome, Firefox, or IE! It could only play in the Safari web browser on Mac. What's going on? Why do modern web browsers fail to play an MP4 video which is supposedly the most widely supported video format? Why won't web browsers play an MP4 file?

Root Cause

First of all, MP4 is not a video format; MP4 is a digital multimedia container format. Within the MP4 container, the actual video can have different formats. It turns out that the video format H.264 has a much wider web browser support than other formats. So you must make sure the format of the video in your MP4 video file is H.264. As for the audio, it doesn't really matter. Audio can be AVC or MP3, both of which are widely supported by web browsers.

How do you find the video codec of your MP4?

Easy. Download and install VLC, and use it to open the MP4 video, and press Control I to bring up the media information dialog. Go to Codec tab to see the media codec of this MP4 file. If you see the following:

MPEG-4 Video (mp4v)

That means this MP4 is using the standard MP4 video codec, which is not widely supported by web browsers. So the solution is to convert this MP4 to another MP4 with H.264 codec. Just search for "video converter online" online and you'll find plenty of such tools.

Once you are done, you should see the following in the Codec tab of the Current Media Information dialog in VLC:

H264 - MPEG-4 AVC (part 10) (avc1)

Congratulations. Try using this MP4 file instead on your website and refresh your favorite web browser to see that the video plays successfully.

Extra Credit!

This MP4 file has very wide browser support already, but to get an even wider browser support, convert the MP4 to WEBM and OGV/OGG, and change the HTML5 video tag to the following:

<video autoplay loop muted controls>
  <source src="my-video.mp4" type="video/mp4">
  <source src="my-video.webm" type="video/webm">
  <source src="my-video.ogv" type="video/ogg">
</video>

As a side note, I found the current version of IE (version 11) has the poorest support for playing video files. When I used the above way to play the video, with the MP4 file using the standard MP4 video codec, all modern web browsers but IE could play it. It means the current version of IE could not even play WEBM or OGV/OGG. Perhaps the future version of IE will, but who knows.

Questions? Let me know!