javascript - HTML5 视频：如何测试 HLS 播放能力？(video.canPlayType)

Question

我有通过 HLS 传送的视频。现在我想用 JavaScript 测试设备是否真的可以播放 HTML5 中的 HLS 视频。

通常在 Javascript 中我做了类似的事情 document.createElement('video').canPlayType('video/mp4') 但是我不知道哪种“类型”是 HLS 的正确类型。

Apple 的 Safari HTML5 Audio and Video Guide似乎建议使用“vnd.apple.mpegURL”（“Listing 1-7 Falling back to a plug-in for IE”）

<video controls>
    <source src="HttpLiveStream.m3u8" type="vnd.apple.mpegURL">
    <source src="ProgressiveDowload.mp4" type="video/mp4">
....

但canPlayType("vnd.apple.mpegURL")即使在可以完美播放实际 HLS 流的 iOS 设备上也返回一个空字符串。

有没有办法在没有“外部知识”的情况下检查播放功能（例如“检查 iOS 用户代理并假设它可以播放 hls”）？

我知道我可以在一个元素中指定多个来源，并且浏览器将使用第一个可播放的来源。但是在我的情况下，我需要向 JW Player 提供一个我无法修改的 URL。所以不知何故，我需要从一组视频编码中找到“最佳可播放 URL”。（不过，一个处理源选择的开源 JS 库将是一个很好的解决方法。）

score 25 · Accepted Answer

我没有对此进行全面测试，但看起来您应该测试完整的 HLS mimetypeapplication/vnd.apple.mpegURL而不仅仅是vnd.apple.mpegURL.

application/x-mpegURL并且audio/mpegurl也是 HLS m3u8 文件的合适 mimetypes。 audio/x-mpegurl根据 Apple 的说法，它也被列为可接受的 mimetype，但在实际的 HLS 草案规范中似乎没有提及。

在 iOS 和 OS X 上的 Safari 中，

document.createElement('video').canPlayType('application/vnd.apple.mpegURL')

返回maybe。我不确定是否有任何其他浏览器支持 HLS——Android 似乎不喜欢这种语法（尽管我看到了一些相反的断言），我相信这可能是因为实际的视频播放被委托给外部应用程序，而不是浏览器本身。

1 回答 1