如何在不同的浏览器和不同的操作系统上精确检测HLS支持？ [英] How can I precisely detect HLS support on different browsers and different OS?

问题描述

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

According to this answer, to test the browser's capabilities to play HLS video, the MIME application/x-mpegURL can be used. But the problem with this approach is that it is returning maybe for iPhone (actually supports HLS) as well as for Firefox for Android (which doesn't support). Though this works well by returning an empty string in case of desktop browsers such as Chrome and Firefox.

是否有确切的方法来检查浏览器对HLS的支持？

Is there any precise way to check for HLS support in a browser?

HTML5test.com 能够准确预测HLS支持为是或否。

HTML5test.com could able to predict the HLS support precisely as Yes or No. How is this functioning?

推荐答案

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版本（首选）

浏览器选择它支持的第一个来源。

HTML-only version (preferred)

Let the browser pick the first source it supports. This is safer.

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

这篇关于如何在不同的浏览器和不同的操作系统上精确检测HLS支持？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！