Chrome 错误检测是否可以播放 HLS 视频媒体答案

【问题标题】：Chrome is wrongly detecting can it play HLS video mediaChrome 错误检测是否可以播放 HLS 视频媒体
【发布时间】：2020-10-01 05:53:25
【问题描述】：

我正在尝试以编程方式根据其 URL 确定某些媒体是否会播放。

根据浏览器测试，HLS 可以在我的 Chrome 浏览器上使用 videoJs 播放器视频库正常播放，但是 CanIUse 说它不会，这是我的第一个困惑。

然后我通过这个 JavaScript 运行它...

使用这个 npm 包获取 mime 类型

https://www.npmjs.com/package/mime-types

var mime = require('mime-types');

// get the extension of the file
var mimeType = mime.contentType(file.split('.').pop());

// returns 'application/vnd.apple.mpegurl'

var video = document.createElement('video');
console.log(Boolean(video.canPlayType(mimeType)));

它也返回 false，但是它确实播放了这让我对这是如何发生的感到困惑，是否有人对为什么会发生这种情况有任何想法，或者我如何正确检测视频是否会播放？

【问题讨论】：

MDN documentation 更受信任
谢谢，不知道有没有办法使用 JavaScript 检测支持？
我会使用该页面中提到的HTTP Live Streaming JavaScript player - 我相信它会做需要做的事情，如果不能做到则失败
视频文件通常由一个包含视频、音频和其他流的包装器组成。这些流中的每一个都可以使用不同的编解码器进行编码。浏览器是否能够播放文件取决于支持的编解码器。但是，mime 类型可能无法指示这些细节或难以检测。所以，.canPlayType 和 .contentType 可以是概率猜测。

标签： javascript video http-live-streaming

【解决方案1】：

“我可以使用 HLS”页面列出了 HTML5 video 标记的兼容性矩阵，这意味着它检查浏览器是否具有该格式的本机支持。例如，MacOS 上除 Safari 外的大多数桌面浏览器都无法原生播放 HLS。

这就是为什么对于 Apple HLS 和 MPEG-DASH 等格式，您需要一个 JavaScript 播放器，该播放器可以将特定格式转换（重新打包流而不重新编码）成video 元素可以本地处理的格式。

关于编解码器，您可能会选择最低公分母，例如带有 AAC 的 H.264 基线，或者提供针对目标设备量身定制的不同格式以及回退机制。

【讨论】：