web-dev-qa-db-ja.com

HTML5ビデオ:HLS再生機能をテストする方法は? (video.canPlayType)

HLSで配信されるビデオがあります。次に、デバイスが実際にHTML5でHLSビデオを再生できるかどうかをJavaScriptでテストしたいと思います。

通常、Javascriptでdocument.createElement('video').canPlayType('video/mp4')のようなことをしましたが、どの 'type'が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")は、実際のHLSストリームを完全に正常に再生できるiOSデバイスでも空の文字列を返します。

「外部知識」なしで再生機能を確認する方法はありますか(例:「iOSユーザーエージェントを確認し、hlsを再生できると想定してください」)。

要素で複数のソースを指定できることはわかっています。ブラウザは最初の再生可能なソースを使用します。ただし、私の場合、変更できないJW Playerに単一のURLをフィードする必要があります。したがって、どういうわけか、ビデオエンコーディングのセットから「最高の再生可能なURL」を見つける必要があります。 (ただし、ソースの選択を処理するオープンソースのJSライブラリは良い回避策です。)

21
Felix Schwarz

私はこれを全面的にテストしていませんが、完全なHLS MIMEタイプをテストする必要があるようですapplication/vnd.Apple.mpegURLだけではなくvnd.Apple.mpegURL

application/x-mpegURLおよびaudio/mpegurlもHLS m3u8ファイルに適したMIMEタイプです。 audio/x-mpegurlもAppleによると、許容できるMIMEタイプとしてリストされていますが、実際の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. http://tools.ietf.org/html/draft-pantos-http-live-streaming-
  4. http://developer.Apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Using_HTML5_Audio_Video.pdf
19
schmod