(Originally posted on Stack Overflow)

I'd like to load and play a smaller HEVC-encoded video on web browsers with support for it.

I'm using this code on Safari 11 (macOS 10.13), which has support for the HEVC format.

<video muted playsinline autoplay>
    <source src="clip.webm" type="video/webm; codecs=vp9">
    <source src="clip-hevc.mp4" type="video/mp4; codecs=hevc">
    <source src="clip.mp4" type="video/mp4; codecs=avc1">
    <p>Video not supported</p>

In Web Inspector > Network Panel, I see that Safari loads both clip.mp4 and clip-hevc.mp4. If I inspect the video element, I see that clip.mp4 is playing, not clip-hevc.mp4. I see the same thing on iOS 11.

When I call HTMLMediaElement.canPlayType() on the types I specified, I get

  • maybe on video/mp4; codecs=hevc
  • probably on video/mp4; codecs=avc1
  • Nothing on variants of the HEVC codec I've seen (e.g., hvc1, hev1)

Something else I noticed: When I remove the clip.mp4 option, clip-hevc.mp4 downloads and plays just fine!

How can I make sure that only the best supported MP4 variant downloads and plays in the browser?

closed as off-topic by Rob, John Conde Sep 22 '18 at 13:34

  • This question does not appear to be about webmastering within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

  • It's really best if you flag your question on other Stack Exchange sites to ask a moderator to migrate it rather than cross-posting it, since that spreads out answers between multiple sites. – dan Feb 24 '18 at 7:35

I think the issue that you've likely having here is that you have ordered the non .hecv video second

<source src="clip-hevc.mp4" type="video/mp4; codecs=hevc">
    <source src="clip.mp4" type="video/mp4; codecs=avc1">

This is probably telling the browser load clip-hevc.mp4, then telling the browser to load clip.mp4 instead.

If you order them the opposite way this will likely tell the browser to load clip.mp4 and then load clip.hevc.mp4 instead:

  <source src="clip.mp4" type="video/mp4; codecs=avc1">
   <source src="clip-hevc.mp4" type="video/mp4; codecs=hevc">

So I think that is the glitchy issue that you are encountering. If you reorder clip-hevc to be at the bottom it will probably load hevc if possible.

I can't however guarantee that this will not load hevc if it isn't browser compatible. You will probably want to test it on a device that does not support hecv and see if it loads clip.mp4 instead.

There are also ways to check which codecs are compatible with the browser. Here is one example:

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"' );
  • 2
    In practice the order doesn't matter to Safari. It will only take HEVC if it is set as the src for the video tag. But the spec implies that browsers should use the first source that it recognises. – Charlie Clark Mar 1 '18 at 14:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.