How to Detect Supported Video Formats for the HTML5 Video Tag

How to detect supported video formats for the HTML5 video tag?

You can check codecs for different video types with HTMLVideoElement.prototype.canPlayType. There is also a great HTML5 feature detection library, Modernizr.

var testEl = document.createElement( "video" ),
    mpeg4, h264, ogg, webm;
if ( testEl.canPlayType ) {
    // Check for MPEG-4 support
    mpeg4 = "" !== testEl.canPlayType( 'video/mp4; codecs="mp4v.20.8"' );

    // Check for h264 support
    h264 = "" !== ( testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E"' )
        || testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' ) );

    // Check for Ogg support
    ogg = "" !== testEl.canPlayType( 'video/ogg; codecs="theora"' );

    // Check for Webm support
    webm = "" !== testEl.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
}

How to detect if a video file is supported by the HTML5 video tag?

I've looked into it more, and canPlayType() can also contain the codec, so you can try:

canPlayType('video/mp4; codecs="avc1.42E01E"');

and

canPlayType('video/mp4; codecs="mp4a.40.2"');

separately for example

How to detect there are no available formats in HTML5 video?

One way (if I understand the question correctly) would be to have your video element with the default fall-back mechanism, and then supplement it using JavaScript for specific format detection and if you don't find a supported format, even though the video element is there display an alternate message

canPlayType(format) 

Tests to see whether the browser can play a specific type of video, for example 'video/webm;codecs="vp8, vorbis"'

The browser will return:

• probably - if it’s most likely the video file can be played maybe
• if the video might be playable [empty string]
• if the video file is not playable

---

<video id="myvid" controls>
    <source src="./foo.mp4" />
    <p>Use new browser.</p>
</video>
<script>
    myvid = document.getElementById("myvid")
    if (myvid.canPlayType('video/webm;codecs="vp8, vorbis"') || myvid.canPlayType('... others depending on what formats you have available ...') {
        // all okay
    } else {
        // alert user to the problem
    }
</script>

Get current playback type of HTML5 video tag

You could check the video element's videoWidth / videoHeight property after the onloadedmetadata event fires. If it is equal to 0, it does not have a video track.

Webkit also supports the webkitVideoDecodedByteCount and webkitAudioDecodedByteCount attributes, but that won't help you on other browsers.

And of course you always query the file type by checking the src's extension:

• if (mp3 | oga | etc) -> assume audio only
• if (mp4 | ogv | webm | etc) -> assume video

What are all the formats of video supported by html5?

There is no universally supported format (yet) unfortunately. Technically, HTML5 doesn't support any video formats, it's the browsers themselves that support specific video formats. This has led to a giant mess.

You can find a list of format compatibility on Wikipedia. From that, VP8/WebM is likely your best bet if you only want to support a single format. Luckily the <video> tag does support fallbacks if providing more than one encoding is feasible for your uses, in which case a VP8/WebM version combined with a H.264 version covers every major browser.

For multiple versions of the same video, you can use the following code:

<video width="320" height="240">
  <source src="myvideo.mp4" type="video/mp4" />
  <source src="myvideo.ogv" type="video/ogg" />
  <source src="myvideo.webm" type="video/webm" />
  <p>Other backup content, eg. a flash version, should go here.</p>
</video>

Which video formats are accetable?

Form controls need a name attribute otherwise the form they're associated with ignores them:

<input type="file" name="upload" accept="video/*">

As for which video formats are allowed, it really depends on the OS and browser. For example, on my system (Window 10), Firefox preselects these extensions:

*.avi;*.divx;*.flv;*.m4v;*.mkv;*.mov;*.mp4;*.mpeg;*.mpg;*.ogm;*.ogv;*.ogx;*.rm;*.rmvb;*.smil;*.webm;*.wmv;*.xvid

Which video format/codecs should I use for HTML video to support actual most recent major browsers?

As @Offbeatmammal suggested on his/her comment, we can see the actual compatibility for the video codecs here:

• https://caniuse.com/?search=video

But the amount of information there is huge and difficult to digest in a specific answer.

Our friends from developer.mozilla.org have some specific suggestions to make and I hope they are updated:

• A WebM container using the VP9 codec for video and the Opus codec for audio
• An MP4 container and the AVC (H.264) video codec, ideally with AAC as your audio codec

Result:

<video controls>
  <source src="video.webm" type='video/webm; codecs="vp9, opus"'>
  <source src="video.mp4" type='video/mp4; codecs="avc1, aac"'>    
</video>

These are the ffmpeg most basic configurations to generate such files:

# Webm
ffmpeg -i #INPUT -c:v libvpx-vp9 -c:a libopus video.webm

# MP4
ffmpeg -i #INPUT -c:v libx264 -c:a aac video.mp4

---

Related Topics