web-dev-qa-db-ja.com

モバイルおよびデスクトップでhtml5ビデオプレイm3U8を再生するには？

IOS and Android with html5 <video>

ただし、デスクトップPCまたはデスクトップMAC（Chrome、Firefox）では再生できません

デスクトップPCでm3u8をプレイする方法？

デスクトップとモバイルの両方で再生されるビデオのストリーミング形式はありますか？

video-streaminghtml5-videom3u8
11
yarek

HLSは、Mac OS Safari 6以降のデスクトップでのみ動作します。こちらをご覧ください 参照用 。

デスクトップ上のHTML5ビデオの場合、MPEG DASHの使用を検討できます。次のブラウザでライブとオンデマンドの両方で動作する JS lib があります。

8/30/13現在、デスクトップChrome、デスクトップInternet Explorer 11、およびモバイルChrome Beta for Androidがサポートされている唯一のブラウザです。

アダプティブストリーミングテクノロジーでより広いブラウザー/デバイスカバレッジが必要な場合は、RTMPとHDSをサポートするFlashまたはSmooth Streamingを備えたSilverlightを使用することを検討する必要があります（Flashの方がカバレッジが優れています）。

現在、ほとんどのメディア企業は、Flash（HDS/RTMP-デスクトップ）/ HTML5（HLS-モバイル）のハイブリッドアプローチを使用して、デバイス上のJavaScriptを事前にチェックし、結果として適切なプレーヤー/ストリーミングプロトコルを配信します。

参考までに、WindowsデスクトップでVLCなどのソフトウェアを使用してHLSストリームを再生できます。

8
Arnaud Leyder

https://github.com/video-dev/hls.js/ でhls.jsプロジェクトをご覧ください。これはまさにこの問題を解決します。

使い方の小さなサンプルを次に示します。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

マニフェストが解析されると、元のhtml5 video要素のすべての通常のイベント、プロパティ、およびメソッドを使用できます。

ここにデモがあります： https://video-dev.github.io/hls.js/demo/

12
Roey

私は答えが少し遅れていることを知っていますが、この情報を探していて、stackoverflowで良い答えを見つけることができませんでした...

私の知る限り、モバイルおよびデスクトップ用にすぐに使えるフォーマットはありません。トランスコーディングの電力を節約し、1つの形式のみを使用する場合は、モバイルで完全に動作し、無料のライブラリを使用してブラウザで動画を表示できるため、HLSをお勧めします。

https://github.com/videojs/videojs-contrib-hls には、videojsの動作例があります。 SafariでHTML5を使用し、他のブラウザーではFlashにフォールバックします。他のプレーヤーを念頭に置いている場合は、 https://github.com/mangui/flashls をチェックしてください。

4
eyeballz
<html>
<body>
    <video width="600" height="400" controls>
        <source src="index.m3u8" type="application/x-mpegURL">
    </video>
</body>

上記のコードを使用して、HLSまたはm3u8ファイルをストリーミングします。 Edgeブラウザ、Chrome、Opera Mini（モバイルブラウザ）で動作します（PC Chromeでは動作しません）

すべてのブラウザで再生するには、フラッシュベースのメディアプレーヤーを使用してください。 すべてのブラウザをサポートするメディアプレーヤー

1
Rakyesh Kadadas

Safariは、HLSをサポートする唯一のデスクトップブラウザです。

編集：danrossiは、HLSをサポートするFlowplayerのフラッシュバージョン用のプラグインを作成しましたが、HTML5ではありません。詳細はこちら： http://justhackme.wordpress.com/2013/03/10/apples-http-live-streaming-in-flash/

0
Dov D.