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.
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.