In 2017 Apple's Safari browser version 11 for both desktop (High Sierra) and iOS 11 introduced support for HEVC (High Efficiency Video Coding, also known as H.265) encoded videos. Generally, H.265 is the successor of H.264. Both codecs can live inside a MP4 container. See Wikipedia for more information. More browsers will probably follow in the future.
Lots of testing has shown that Safari also seems to considers the hardware it's running on to choose the best available source, which means the order of the
source tags is not everything!
On older hardware Safari may prefer the H.264 video source over the HEVC video source. Hardware support for decoding H.264 has been widely available for years, whereas HEVC/H.265 hardware support is pretty new. My best guess at the moment is, that the following conditions may be considered:
- Does device have HEVC hardware support?
- Does device have a fast CPU?
- Does device have a battery?
Using this demo you can test if your browser (and hardware) supports HEVC video playback. The following HTML
<video> tag contains three sources in this order: The HEVC encoded video file is listed first, followed by a WebM version (just for fun, supported e.g. Google Chrome, but not Safari) and H.264 is last, which is supported by all main web browsers these days.
The content of all three videos is almost identical, but each version displays the used video codec next to the timecode, e.g.
HEVC 00:00:00:00, so you can easily identify the version you see.
<video width="320" height="180" autoplay muted> <source src="hevc.mp4" type='video/mp4; codecs="hvc1"'> <source src="webm.webm" type="video/webm"> <source src="h264.mp4" type='video/mp4; codecs="avc1"'> </video>
Real Test Results
- iMac 5K Late 2014: ✅ prefers HEVC (despite most probably not having HEVC hardware support)
- MacBook Pro 2015: ⚠️ prefers H.264, but plays HEVC if necessary
- iPhone X (iOS 12 beta): ✅ prefers HEVC
- iPhone 7 Plus (iOS 11): ✅ prefers HEVC
- older iPad Air (iOS 11): ⚠️ prefers H.264, but plays HEVC if necessary