From c3704408ace0637ccd965cd19b92bf813a9f91e5 Mon Sep 17 00:00:00 2001 From: Rob Walch Date: Fri, 15 May 2026 16:33:20 -0700 Subject: [PATCH] Update README Alternative setup for 2026 browsers (#7844) Closes #7827 --- README.md | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b4aee4f67..cd53893fe 100644 --- a/README.md +++ b/README.md @@ -367,7 +367,9 @@ native browser support for HLS playback in HTMLMediaElements: #### Alternative setup -To check for native browser support first and then fallback to HLS.js, swap these conditionals. See [this comment](https://github.com/video-dev/hls.js/pull/2954#issuecomment-670021358) to understand some of the tradeoffs. +To check for native browser support first and then fallback to HLS.js, swap these conditionals. + +> **Note:** `video.canPlayType('application/vnd.apple.mpegurl')` returns a non-empty string ("maybe") in Safari, Chrome, and potentially other browsers. However, not all browsers support HLS content equally — for example, Chrome 147 reports support but may fail to play certain streams natively. Using `Hls.isSupported()` first (the default setup above) is recommended unless you specifically need native playback. ```html @@ -378,12 +380,17 @@ To check for native browser support first and then fallback to HLS.js, swap thes var video = document.getElementById('video'); var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'; // - // First check for native browser HLS support + // Only use native HLS in browsers with ManagedMediaSource (e.g. modern Safari) + // where native playback is well-supported. Other browsers may report HLS support + // via canPlayType but fail to play certain streams reliably. // - if (video.canPlayType('application/vnd.apple.mpegurl')) { + if ( + video.canPlayType('application/vnd.apple.mpegurl') && + 'ManagedMediaSource' in window + ) { video.src = videoSrc; // - // If no native HLS support, check if HLS.js is supported + // If not using native HLS, check if HLS.js is supported // } else if (Hls.isSupported()) { var hls = new Hls();