web-dev-qa-db-ja.com

すべてのPCブラウザでm3u8プレイリストを再生する方法は？

デフォルトでは、m3u8ファイルはMac Safariブラウザーで再生できますが、他のデスクトップブラウザーでは再生できません。 HTML5と非HTML5の両方をサポートするすべてのブラウザーでそれらを再生するには、何をする必要がありますか？

http-live-streaming
27
sri

残念ながら、ビデオのHTML5サポートは非​​常に断片化されているため、この時点では（少なくとも主な焦点として）役に立たない（すべての意図と目的にとって）。 M3U8プレイリストは、Apple HTTP Live Streamingであり、名前からわかるように、それらは（または少なくとも少なくとも次のように開始されます）Apple standard、no他のブラウザはそれら、またはHTTPライブストリーミングを使用します。

HLSのサポートを追加するためにインストールできるプログラムがいくつかあります。たとえば、一部の企業は、FlashまたはSilverlightで記述されたHLSプレーヤーを製造しています。 Yospace は、非フラッシュデバイス（読み取り：iPhone/iPad）でJWの自動HTML5フォールバックを使用できるJWPlayerメディアプロバイダーを含むHLS再生用のフラッシュSDKを作成し、他のすべてはJWPlayerエクスペリエンスを取得します。

さまざまな企業から「ブラウザビデオサポートを標準化する」という多くの約束がありましたが、それらはすべて（今のところ）何もしませんでした。

10
Haqa

Microsoft Edgeはm3u8ファイルを再生しますが、Windows 8または10が必要です... Microsoft Edgeを開いてm3u8ファイルのURLを書き込むと、再生が開始されます。

5
user6375752

Flowplayerを使用しました。独自のブランディングが必要な場合を除き、セットアップと導入は非常に簡単で、すべてのブラウザで動作し、無料です（JWプレーヤーとは異なります）。

ここでフロープレーヤーを取得 フロープレーヤーダウンロード

このデモに従うことで、HLS再生を正常にセットアップできました。

HLSデモ

デモで言及されていないことの1つは、それです。

  1. Jquery> 1.7が必要です
  2. HTMLにプレーヤーのスキンCSSを含めます

たとえば、HLSを実行する作業ページは次のとおりです。

<!DOCTYPE html>
<html>
   <head>
      <title>Player</title>
      <link rel="stylesheet" href="/client/static/flowplayer-6.0.5/skin/functional.css">
      <script src="/client/static/flowplayer-6.0.5/jquery-1.12.4.min.js"></script>
      <script src="/client/static/flowplayer-6.0.5/flowplayer.min.js"></script>
      <script src="/client/static/flowplayer-6.0.5/flowplayer.hlsjs.min.js"></script>
   </head>
   <body>
      <div>
         <h3>Sample Video</h3>
      </div>
      <div id="player">
        <div data-live="false" data-ratio="0.5625" class="flowplayer fixed-controls" data-volume="0" style="max-width: 800px; max-height: 450px;">
            <video data-title="Sample Video">
            <source type="application/x-mpegurl" src="http://:8000/video_cache/d_stream_f7ccc24921ca6123d80d7d1a1a4bfaa1/stream_f7ccc24921ca6123d80d7d1a1a4bfaa1.m3u8">
            </video>
        </div>
         <p hidden id="vid">f7ccc24921ca6123d80d7d1a1a4bfaa1</p>
      </div>
   </body>
</html>
2
anu