HTML5视频：如何测试HLS播放功能？ （video.canPlayType） [英] HTML5 video: How to test for HLS playing capability? (video.canPlayType)

问题描述

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

通常在Javascript中我做了类似
<$ c $的事情c> document.createElement（'video'）。canPlayType（'video / mp4'）
但是我无法弄清楚哪种'类型'是正确的HLS。

Apple的Safari HTML5音频和视频指南似乎提示vnd.apple.mpegURL（代码1-7回退到IE插件）

 < video controls> 
< source src =HttpLiveStream.m3u8type =vnd.apple.mpegURL> 
< source src =ProgressiveDowload.mp4type =video / mp4> 
 .... 
  

但 canPlayType（vnd.apple .mpegURL）即使在iOS设备上也可以返回一个空字符串，它可以很好地播放实际的HLS流。

有什么方法可以检查没有外部知识的回放功能（例如检查iOS用户代理并假设它可以播放hls）？我知道我可以在元素中指定多个源，浏览器将使用第一个可播放的源代码。但是在我的情况下，我需要向JW Player提供一个我无法修改的URL。因此，我需要从一组视频编码中找到最佳可播放网址。 （一个处理源选择的开源JS库将是一个很好的解决方法。）

解决方案

但看起来你应该测试完整的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'）
  

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

参考文献：

1. http://developer.apple.com/library/ios/# technotes / tn2235 / _index.html


2. http：//www.longtailvideo。 com / html5 / hls


3. http://tools.ietf.org/html/draft-pantos-http-live-streaming-03


4. http://developer.apple.com/library/safari/documentation/Aud ioVideo / Conceptual / Using_HTML5_Audio_Video / Using_HTML5_Audio_Video.pdf

I have video which is delivered over HLS. Now I'd like to test in JavaScript if the device actually can play HLS video in HTML5.

Usually in Javascript I did something like document.createElement('video').canPlayType('video/mp4') However I can't figure out which 'type' is the right one for HLS.

Apple's Safari HTML5 Audio and Video Guide seems to suggest "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">
....

but canPlayType("vnd.apple.mpegURL") return an empty string even on iOS devices which can play actual HLS streams perfectly fine.

Is there any way to check for playback capabilities without 'external knowledge' (e.g. "check for iOS user agent and assume it can play hls")?

I know I can specify multiple sources in a element and the browser will use the first playable source. However in my case I need feed a single URL to JW Player which I can't modify. So somehow I need to find the "best playable URL" from a set of video encodings. (An open source JS library which handles source selection would be a nice workaround though.)

解决方案

I haven't tested this across the board, but it looks like you should be testing for the full HLS mimetype application/vnd.apple.mpegURL instead of just just vnd.apple.mpegURL.

application/x-mpegURL and audio/mpegurl are also suitable mimetypes for the HLS m3u8 file. audio/x-mpegurl is also listed as an acceptable mimetype according to Apple, but it doesn't appear to be mentioned in the actual HLS draft spec.

In Safari on iOS and OS X,

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

returns maybe. I'm not sure if there are any other browsers that support HLS -- Android doesn't seem to like this syntax (despite some assertions I've seen to the contrary), and I believe that it may be due to the fact that the actual video playback is delegated to an external application, rather than the browser itself.

References:

1. http://developer.apple.com/library/ios/#technotes/tn2235/_index.html
2. http://www.longtailvideo.com/html5/hls
3. http://tools.ietf.org/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

这篇关于HTML5视频：如何测试HLS播放功能？ （video.canPlayType）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！