Get Safari to prefer HEVC in HTML 5 video tag

Question

I'm currently investigating the feasibility of adding HEVC support to videos but am hitting a problem with Safari. Here's the sample source:

<video autobuffer="true" autoloop="" loop="" controls="">
    <source src="film_WebM.webm" type="video/webm">
    <source src="film_HEVC.mp4" type="video/mp4">
    <source src="film.mp4" type="video/mp4">
</video>

Ideally a browser should read the sources and takt the first file that it thinks it can read and this should allow Firefox and Chromium to show the VP9 film, Safari the HEVC and Internet Explorer the H264. However, Safari doesn't play nicely and will ignore the HEVC film if the H264 is present. I've tried annotating the source with codec information but this doesn't help. Setting HEVC as the default source for the video element works for Safari but causes problems for every other browser.

Is there any way to solve this without using feature detection to manipulate the src element?

Filed with Apple as a Safari bug #37821806

The discussion below suggests that Safari could, despite Apple's own release notes, be deciding to use an AVC source based on hardware considerations. How it manages to do this without codec hint or apparent mime-type sniffing is unclear. It would be useful if people could test the codepen demo and note in comments what codec play and Mac hardware info.

Answer 1

First make sure your HEVC video is encoded correctly so it can be played back by Safari. Test this by removing all sources from the video tag except the one pointing to your HEVC video. If Safari plays it, continue to the next step, otherwise fix the video file.

Once you are sure the HEVC video is compatible with Safari, give the browser a hint about the codecs by using the type property in the source tags. So far you're only telling the browser that a MP4 container is used for both the HEVC and the H.264 source. Browsers would have to download parts of the files in order to figure out which of the files are compatible, usually in order of the source tags.

You can/should specify details about all codecs used, including video codec and if audio is involved, the audio codecs as well.

• avc1 stands for H.264
• hvc1 stands for H.265 (HEVC)

For your example, the shortest version would be this:

<video>
    <source src="film_WebM.webm" type="video/webm">
    <source src="film_HEVC.mp4" type='video/mp4; codecs="hvc1"'>
    <source src="film.mp4" type='video/mp4; codecs="avc1"'>
</video>

Also see: Demo on CodePen

Update

Thanks to your feedback in the comments, I think I figured out what's going on: Safari seems to consider your hardware to choose the best video source, which is actually quite clever. Hardware support for H.264 is widely available, even on older hardware, whereas HEVC/H.265 hardware support isn't and requires more CPU and will ultimately require more energy (battery) as well.

So, although your device (e.g. MBP) and software can decode and play the HEVC video, Safari may prefer the H.264 video source if available.

I did some more tests:

• iMac Late 2014 (5K): ✅ HEVC
• iPhone X (iOS 12 beta): ✅ HEVC
• iPhone 7 Plus (iOS 11): ✅ HEVC
• older iPad Air (iOS 11): ⚠️ prefers H.264, but will play HEVC video if no H.264 source is available