6

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?

nfrasser
  • 345
  • 4
  • 11

2 Answers2

3

FYI found in iOS14 type="video/mp4; codecs=hevc" doesn't work anymore. type="video/mp4" and type="video/mp4; codecs=hvc1" doesenter image description here

Robert Daly
  • 377
  • 1
  • 9
0

You can check if the browser supports hevc code by using this link https://cconcolato.github.io/media-mime-support/#other_video_codecs

And depending on hevc profile, you must specify the type of codec 1

spoyler
  • 1
  • 1