HTML5视频:如何测试HLS播放功能？(video.canPlayType)

Question

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

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

Apple的Safari HTML5音频和视频指南似乎建议使用"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. audio/x-mpegurl根据Apple,它也被列为可接受的mimetype,但在实际的HLS草案规范中似乎没有提到.

在iOS和OS X上的Safari中,

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

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

参考文献: