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.

Symphony

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

Curson

Yes, the HEVC works fine in Safari as long as the AVC isn't in the source list. Adding codec hints didn't help which suggests this is a bug in Safari. – Symphony

It works fine for me in Safari version 11.1.2 + High Sierra with the method described above. – Curson

I've got Safari 11.1.2 here and it isn't working when I check the actual URL of the film playing. Only if I remove the h264 source does Safari play the HEVC film. – Symphony

I've added a link to a CodePen demo link above. Can you see the HEVC video there in Safari? I can. – Curson

Thanks for the link but that isn't working on my machine. Feature detection is also throwing up a negative but Safari will happily play the HEVC file: cloudunder.io/staticfiles/hevcdemo/hevc.mp4. Changing the codec detection to codecs=hevc brings a maybe. – Symphony

This is really strange. What OS version are you using? I'm on macOS High Sierra (10.13.6). By the way, don't be fooled by the maybe result when checking for codecs=hevc – maybe only means "I don't know if I can play this, I'll have to load the file and find out". You may get the same result checking for codecs=charlie. – Curson

I have High Sierra on a MBP 2015. So, yes, it is really strange. Firefox is reported as "maybe" having support for WebM while happily playing the file, which basically confirms that feature detection is failing. – Symphony

I did some more tests and I think I figured it out. See updated answer. – Curson

I've been thinking along those lines but these go in the face of the release notes for High Sierra. HW support for decoding should be in the 2015 CPUs. Without access to a hardware farm sort of difficult to test. – Symphony

My iMac Late 2014 surely doesn't have hardware support, but a 4 GHz Intel quad core i7 CPU (and it's also not a battery-backed device). I am very confident that it's the hardware that makes the difference, not the source tags, i.e. you're not doing anything wrong and it also doesn't seem to be a bug. I'll test on some more older iMacs soon. – Curson

According Intel's own documents the Iris 5500 definitely does communities.intel.com/thread/59216 Anyway the bit can be flipped depending whether there is power or not. – Symphony

Also note, that Safari prefers the MP4-h264 source even without the codec hint. Which is magic™. – Symphony

Maybe your Safari had the video files already cached? Without codec hints (codepen.io/cloudunder/pen/BPgzaq) I can observe Safari of my old iPad loading all videos one by one in order of the source tags via the network tab of the inspector. – Curson

I tested with an empty cache. Really need some clarity from Apple on this as otherwise we're just guessing. – Symphony

The feature detection seems flaky. Have you seen this? cconcolato.github.io/media-mime-support – Symphony

Any idea what parameters to give to ffmpeg to make a safari compatible hevc file? I tried this ffmpeg -i input.mp4 -c:v libx265 -an -x265-params crf=25 output.mp4 and the result plays in VLC who's info says it's a h265 file but Safari doesn't like it. – Bishopric