Question

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

通常在Javascript中我做了类似的事情 document.createElement('video').canPlayType('video/mp4') 但是我无法弄清楚哪种'类型'是HLS的正确选择。

Apple's Safari HTML5 Audio and Video Guide似乎暗示“vnd.apple.mpegURL”（“清单1-7回归到IE的插件”）

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

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

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

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

Answer 1

我没有全面测试过，但看起来您应该测试完整的HLS mimetype application/vnd.apple.mpegURL，而不仅仅是vnd.apple.mpegURL。

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

在iOS和OS X上的Safari中，

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

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

参考文献：