3

I am using

video/mp4

format and using in 'video js', this is working fine in chrome but having issue with Firefox. Getting following error in console:

Specified "type" attribute of "video/mp4" is not supported. Load of media resource # failed.

Is there any single video codec supported by all major browsers like Chrome, Firefix, IE and Safari.

Thanks in advance.

Riz
  • 9,703
  • 8
  • 38
  • 54

2 Answers2

6

MP4 is a container format so it's also important what codecs you put inside it.

Firefox supports MP4 with H.264 for video and AAC or MP3 for audio and only if you have a third-party decoder available. If you're looking for a single format to rule them all you're out of luck since there's currently none.

The way you handle this is transcoding the same content file to multiple formats and use a fallback mechanism in your player.

See the Media Formats page on Mozilla to get an idea of what is supported and where. For eg. WebM with VP9/VP8, Vorbis/Opus works on Firefox.

In general, the fallback works by specifying all the different versions of the same file as sources for your <video> tag. The browser will choose the first that it can play.

Example from HTML5 Rocks:

<video controls>
  <source src="devstories.webm" type='video/webm;codecs="vp8, vorbis"'/>
  <source src="devstories.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>

If the browser cannot play WebM it will fall back to MP4.

aergistal
  • 29,947
  • 5
  • 70
  • 92
  • If I handle/store multiple formats, what if user edits a video, if he is doing changes in one format, I 'll have to do the same for same files in other formats. Any advice for this, files are stored on S3. – Riz Nov 24 '15 at 16:59
  • 1
    The changes would be done on a master and you would need to re-encode. Amazon has the Elastic Transcoder but you can do it yourself with the FFmpeg multimedia framework https://www.ffmpeg.org/ – aergistal Nov 24 '15 at 18:35
  • [diveintohtml5.info](http://diveintohtml5.info/video.html#what-works) has a good summary of the fewest formats required to cover most user agents. – Robert K. Bell Jan 17 '17 at 23:24
  • I know what format can be use and where. What I need, is a way to play ogg ONLY for firefox, because my mp4 is hd and clean for only 1mb and my ogg is ugly and is 4mb... – Richard Oct 17 '19 at 16:02
3

In my non-exhaustive tests I found that h264 video with aac audio in an mp4 container (transcoded with ffmpeg) works at least for the following browsers:

  • Chrome 80 on Android and Windows 10
  • Safari on iPadOS and iOS 13.4, and on MacOS 10.15
  • Internet Explorer 11 on Windows 10
  • Firefox 74 on Android and Windows 10
  • Edge 80 on Windows 10

I encoded a video file from a digital camcorder with the following ffmpeg parameters on Ubuntu 18.04:

ffmpeg -i before.mov -y -loglevel 31 -filter:v fps=fps=30 -movflags +faststart \ 
-f mp4 -vcodec libx264 -vf scale=1280:-1 -acodec aac -b:a 128k \ 
-b :v 1000k -preset faster 'after.mp4'

Edit

I found out that, strangely, an mp3-audio file plays back in Safari/MacOS in the audio-tag. But a video with an mp3 audio-track does not playback the audio.

yglodt
  • 13,807
  • 14
  • 91
  • 127