20

It's strange, some MP4 files will play in HTML5, but others won't. Here is a test page http://psdtucss.com/test/test2.html, open it in Chrome 19.0.1084.46 m. The first MP4 plays, but the other one won't. What's the reason. The code is very simple:

<h3>the first mp4 file can play</h3> 
<p><video width="640" height="264" controls="controls"><source src="1.mp4" type="video/mp4" />Your browser does not support the video tag.</video></p> 
<h3>but the other can't play</h3> 
<p><video width="640" height="264" controls="controls"><source src="2.mp4" type="video/mp4" />Your browser does not support the video tag.</video></p>

How can I fix this?

I tried videojs, but still some MP4 files won't play. Test page is here: http://psdtucss.com/test/test.html

Frank Lv
  • 303
  • 1
  • 3
  • 10

4 Answers4

19

mp4 is only the container format. It may contain video and audio in a number of different codecs. Players (including those in a browser) need to support the container format and all of the used codecs in order to play a video properly.

Using VideoJS is definitely a good idea, it handles a lot of browser-specific workarounds for you.

However it does not solve one problem: There is no single video codec supported in all browsers. (See also Wikipedia: HTML5 video: Browser_support)

The practical solution probably is to provide two versions: h264 in a mp4 container and what is usually called webm (VP8 video and vorbis audio in a specific Matroska container). With those two you cover all major browsers.

For video conversion/recoding there are some tools and services available. I have no idea about your operating system or requirements. So just as a wild guess:

Something I used to help a friend publish a few videos on his little blog is this shell script using ffmpeg for conversion. It still leaves a lot of potential for improvement (in all of video quality, performance and coding) but should be good enough to get started.

zpea
  • 1,072
  • 6
  • 23
  • Is frame rate ever an issue? I'm working with multiple MP4s where two don't work and they have a frame rate of 29.97. One does work and it has a frame rate of 30fps. They all have the same H.264 codec. – rpeg Dec 04 '18 at 04:48
12

The first video uses h264 encoding which is supported by everything except Firefox and Opera. The second video uses the MPEG-4 video codec which is not supported by browsers. The only widely supported video codecs are Theora, H.264 and VP8.

MPEG-4 Part 2 video codec is different from the MPEG-4 Part 14 container format

Dennis
  • 32,200
  • 11
  • 64
  • 79
  • Thanks. BTW, vlc->Tools > Codec Information can find out the codec , https://success.powerdms.com/s/article/How-can-I-tell-if-my-MP4-video-has-h264-codec?language=en_US – camino Jan 03 '22 at 23:09
9

Your video 1.mp4 is encoded using h.264 but video 2.mp4 is not. get MediaInfo to check about it.

Sany Liew
  • 1,615
  • 21
  • 25
3

MP4 supports multiple codecs. Some players don't support all codecs (some codes require licensing, or some codecs were released after the browser was written).

Peter Ritchie
  • 35,463
  • 9
  • 80
  • 98