(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-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
- Nothing on variants of the HEVC codec I've seen (e.g.,
Something else I noticed: When I remove the
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?