如何在不同浏览器和不同操作系统上精确检测 HLS 支持？

Question

根据这个答案，要测试浏览器播放HLS视频的能力，application/x-mpegURL可以使用MIME 。但是这种方法的问题在于它正在maybe为 iPhone（实际上支持 HLS）和 Firefox for Android（不支持）返回。尽管在 Chrome 和 Firefox 等桌面浏览器的情况下通过返回空字符串可以很好地工作。

是否有任何精确的方法来检查浏览器中的 HLS 支持？

HTML5test.com可以准确地预测 HLS 支持为是或否。这是如何运作的？

Answer 1

JavaScript 版本

function supportsHLS() {
  var video = document.createElement('video');
  return Boolean(video.canPlayType('application/vnd.apple.mpegURL') || video.canPlayType('audio/mpegurl'))
}

然后将其用作：

if (supportsHLS()) {
  myVideoElement.src = 'your-hls-url.m3u8';
} else {
  myVideoElement.src = 'your-plain-video-url.mp4';
}

纯 HTML 版本（首选）

让浏览器选择它支持的第一个来源。这样更安全。

<video>
    <source src="your-hls-url.m3u8" type="application/vnd.apple.mpegurl">
    <source src="your-plain-video-url.mp4" type="video/mp4">
</video>