web-dev-qa-db-ja.com

html5ビデオタグを使用して、Apple HLSライブストリームを再生する方法

<video id="live"  autoplay controls>
    <source src="http://[WOWZA-IP]:1935/Live/mp4:[LIVESTREAMNAME]/playlist.m3u8" type="video/mp4" />
</video>

Html5ビデオタグを使用して、h264でエンコードされたライブストリームを再生しようとしています。ライブストリームはwowzaメディアサーバーによってブロードキャストされ、srcリンクにアクセスすると、有効なプレイリストファイルが取得されます。 Android chromeブラウザでストリームを再生しようとすると、プレーヤーは何もせず、黒い画面を表示します。

これはhtml5ビデオタグ関連の問題ですか、それとも放送局ですか？

html5videolive-streamingwowza
24
jM2.me

これらは、html5ソースタグを使用して再生できる形式です。

ビデオ形式は、エンコードされたビデオストリームとオーディオストリームを含むZipファイルと考えてください。 Webで注意すべき3つの形式（webm、mp4、およびogv）は次のとおりです。

.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
9
robert

これには、実際にはさまざまな解決策があります。 1つの解決策は、HLSを再生できるかどうかを検出することです。

document.createElement('video').canPlayType('application/vnd.Apple.mpegURL') !== ''

ただし、これにより、再生をサポートしていないデバイスでHLSコンテンツを再生できなくなります。現時点では、再生はMicrosoft Edge、iOS Safari、OS X SafariおよびAndroid（ ただし、Android制限のため ）

HTML5のすべてのプラットフォームでHLSを再生する他のソリューションは、 THEOplayer などのHTML5 HLSプレーヤーを使用することです。 HLSを すべての一般的なプラットフォームとデバイス で再生できるようにしました。これには Media Source Extension のサポートがないものも含まれます。現在、サポートされているブラウザーとプラットフォームのリストには、Internet Explorer、Edge、Firefox、Chrome、OperaおよびWindows、Linux、Mac OS X、Android、iOS、Windows PhoneのSafariが含まれます。

6
MrP

Media Source Extension をサポートするブラウザでは https://github.com/dailymotion/hls.js を使用できます

4
mangui

FlowPlayer を試してください。サーバー側で最小限の労力で完全なHLSサポートを提供します！

2
XlbrlX

フラッシュを使用する回避策については、 FlasHLS クロムレスプレーヤーを使用できます。

2
flavioribeiro