Javascript HTML5 视频:如何测试 HLS 播放能力?(video.canPlayType)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12410132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:54:58  来源:igfitidea点击:

HTML5 video: How to test for HLS playing capability? (video.canPlayType)

javascripthtmlhttp-live-streaming

提问by Felix Schwarz

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.

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

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.

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

Apple's Safari HTML5 Audio and Video Guideseems to suggest "vnd.apple.mpegURL" ("Listing 1-7 Falling back to a plug-in for IE")

Apple 的 Safari HTML5 Audio and Video Guide似乎建议“vnd.apple.mpegURL”(“Listing 1-7 Falling to a plugin 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.

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

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")?

有没有办法在没有“外部知识”的情况下检查播放功能(例如“检查 iOS 用户代理并假设它可以播放 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.)

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

回答by schmod

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

我还没有全面测试过这个,但看起来你应该测试完整的 HLS mimetypeapplication/vnd.apple.mpegURL而不仅仅是vnd.apple.mpegURL.

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

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

In Safari on iOS and OS X,

在 iOS 和 OS X 上的 Safari 中,

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.

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

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
  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