HTML5视频：如何测试HLS播放能力？（video.canPlayType）

Question

我有一个使用HLS传输的视频。现在我想在JavaScript中测试设备是否能够以HTML5播放HLS视频。

通常在JavaScript中我会这样做：document.createElement('video').canPlayType('video/mp4')。但是我无法确定HLS的正确“type”是什么。

苹果的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">
....

即使在能够完美播放实际的HLS流的iOS设备上，canPlayType("vnd.apple.mpegURL")仍然会返回一个空字符串。

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

我知道我可以在<video>元素中指定多个源，浏览器将使用第一个可播放的源。但是，在我的情况下，我需要向JW Player提供单个URL，而我无法修改它。因此，我需要从一组视频编码中找到"最佳可播放URL"。（处理源选择的开源JS库将是一个不错的解决方法。）

- Felix Schwarz

---

我相信跨浏览器不存在这样的测试。也许修复JW Player是解决这个问题的“正确”方法。 - vipw

同意，理想情况下JW Player（实际上所有视频播放器）应该提供具有不同质量级别、格式等概念的“丰富”播放列表元素。然而，JW Player并没有这样做，对于这个项目，我不能假设每个人都在使用经过修补的JW Player。 - Felix Schwarz

@felix，我现在正在学习视频流，Schmod的答案仍然正确吗？ - tim peterson

Answer 1

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

application/x-mpegURL 和 audio/mpegurl 也是适用于HLS m3u8文件的mimetype。根据苹果公司的说法，audio/x-mpegurl 也被列为可接受的mimetype，但它似乎在实际的HLS草案规范中没有提到。

在iOS和OS X上的Safari浏览器中，

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

返回值是maybe。我不确定是否还有其他浏览器支持HLS——尽管我看到了一些相反的说法，但Android似乎不喜欢这种语法，我认为这可能是由于实际视频播放被委托给外部应用程序而不是浏览器本身所致。

参考资料：

1. http://developer.apple.com/library/ios/#technotes/tn2235/_index.html
2. http://www.longtailvideo.com/html5/hls
3. https://datatracker.ietf.org/doc/html/draft-pantos-http-live-streaming-03
4. http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Using_HTML5_Audio_Video.pdf

- schmod

---

我现在正在学习视频流，你的答案仍然正确吗？ - tim peterson

这里的一切仍然是正确的，而且 HLS 的 mimetype 似乎在短时间内不太可能改变。Longtail 每隔几个月就会修订他们的“HTML5 视频现状”报告，并且是获取各种 HTML5 视频 API 最新信息的最佳去处（虽然采用速度非常缓慢）。 - schmod

这在大多数设备上都可行 - 但在三星 Galaxy S5 原生浏览器上会失败 - 您需要一个解决方法。总体而言，三星Galaxy的内联HLS流存在缺陷。 - easwee

经过一些快速测试，在FireTV Silk浏览器上似乎存在错误。 - Jonny