logo topseosmo.com

 query : How do I specify the HEVC codec in the HTML5 video source type attribute? (Originally posted on Stack Overflow) I'd like to load and play a smaller HEVC-encoded video on web browsers with support

@Michele947

Posted in: #Html5 #Safari #Video

(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>
</video>


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?

10.01% popularity Vote Up Vote Down


Report

1 Comments

Sorted by latest first Latest Oldest Best

@Steve110

@Steve110

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"' );
}

10% popularity Vote Up Vote Down


Report

Back to top | Use Dark Theme