web-dev-qa-db-ja.com

HTMLビデオタグでm3u8ファイルを再生する

HTTPライブストリーミング（HLS）を使用して、ビデオをコンピューターとiPhoneにストリーミングしようとしています。 Apple「HTTPライブストリーミングの概要」と「iPhoneおよびiPad用のHTTPライブストリーミングメディアを作成および展開するためのベストプラクティス」を読んだ後、少し行き詰まりました。

ソースファイル（mkv）を取得し、ffmpegを使用してファイルをMPEG-TS形式とAppleが推奨する設定とベースライン3.0プロファイルをエンコードしました。

ffmpeg -i "example.mkv" -f mpegts -threads:v 4 -sws_flags bicubic -vf "scale=640:352,setdar=16/9,ass=sub.ass" -codec:v libx264 -r 29.970 -b:v 1200k -profile:v baseline -level:v 3.0 -movflags faststart -coder 1 -flags +loop -cmp chroma -partitions +parti8x8+parti4x4+partp8x8+partb8x8 -me_method hex -subq 6 -me_range 16 -g 239 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -b_strategy 1 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -direct-pred 1 -fast-pskip 1 -af "aresample=48000" -codec:a libvo_aacenc -b:a 96k -ac 2  -y "output.ts"

心配ありません。 プリコンパイル済みのセグメント化ツール を使用して、ビデオをセグメント化し、.m3u8プレイリストを作成しました。結果のファイルは次のようになりました。

#EXTM3U
#EXT-X-TARGETDURATION:10
#EXTINF:10,
http://localhost/media/stream/stream-1.ts
#EXTINF:10,
http://localhost/media/stream/stream-2.ts
#EXTINF:10,
http://localhost/media/stream/stream-3.ts
#EXT-X-ENDLIST

HTTPライブストリーミングで使用するプレイリストファイルの例 に対して確認しましたが、問題はありません。また、VLCで.m3u8ファイルを再生しようとしましたが、これは魅力のように機能します。

ファイルを再生するHTMLページを作成しました。

<html lang="en">
    <head>
        <meta charset=utf-8/>
    </head>
    <body>
        <div id='player'>
            <video width="352" height="288" src="stream.m3u8" controls autoplay>
            </video>
        </div>
    </body>
</html>

また、このページは、iPhone上のChrome、Safariでは機能しません。 w3schoolsのhtml5ビデオタグの例は私のコンピューターで正常に動作し、上記の公式Apple概要は私のページに非常によく似たHTMLの例を提供します。それでも、自分の.m3u8ページにアクセスすると、ビデオプレーヤーが完全に応答しなくなります。

htmlstreaminghtml5-videohttp-live-streamingm3u8
38
drucifer

答えが少し遅れる可能性がありますが、ビデオタグにMIMEタイプ属性type = "application/x-mpegURL"を指定する必要があります。 16：9ストリームに使用するビデオタグは次のようになります。

<video width="352" height="198" controls>
    <source src="playlist.m3u8" type="application/x-mpegURL">
</video>
37
ben.bourdin
<html>
<body>
    <video width="600" height="400" controls>
        <source src="index.m3u8" type="application/x-mpegURL">
    </video>
</body>

上記のコードを使用して、HLSまたはm3u8ファイルをストリーミングします。デスクトップで動作します：ms Edgeブラウザー（デスクトップchromeで動作しません）およびモバイル：chrome、opera miniブラウザー。

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

7
Rakyesh Kadadas

ビデオjsライブラリを使用して、簡単に再生できますHLSビデオ。ビデオを直接再生できます

<!-- CSS  -->
 <link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet">


<!-- HTML -->
<video id='hls-example'  class="video-js vjs-default-skin" width="400" height="300" controls>
<source type="application/x-mpegURL" src="http://www.streambox.fr/playlists/test_001/stream.m3u8">
</video>


<!-- JS code -->
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>

<script>
var player = videojs('hls-example');
player.play();
</script>

GitHub Video Js

7
Rakyesh Kadadas

Ben.bourdinの回答に追加して、少なくともHTMLベースのアプリケーションで、ブラウザがvideo要素でHLSをサポートしているかどうかを確認できます。

ビデオ要素IDが「myVideo」であると仮定し、javascriptを使用して「canPlayType」関数を使用できます（ http://www.w3schools.com/tags/av_met_canplaytype.asp ）

var videoElement = document.getElementById("myVideo");
if(videoElement.canPlayType('application/vnd.Apple.mpegurl') === "probably" || videoElement.canPlayType('application/vnd.Apple.mpegurl') === "maybe"){
    //Actions like playing the .m3u8 content
}
else{
    //Actions like playing another video type
}

CanPlayType関数は以下を返します：

「」は、指定されたオーディオ/ビデオタイプのサポートがない場合

「多分」ブラウザが指定されたオーディオ/ビデオタイプをサポートする場合

「おそらく」指定されたオーディオ/ビデオタイプをサポートする可能性が高い場合（検証でこの値だけを使用して、ブラウザが指定されたタイプをサポートしていることを確認できます）

このヘルプを願っています:)

宜しくお願いします！

5
MaxTomasello

Flowplayerを使用：

<link rel="stylesheet" href="//releases.flowplayer.org/7.0.4/commercial/skin/skin.css">
    <style>

   </style>
   <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="//releases.flowplayer.org/7.0.4/commercial/flowplayer.min.js"></script>
  <script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script> 
  <script>
  flowplayer(function (api) {
    api.on("load", function (e, api, video) {
      $("#vinfo").text(api.engine.engineName + " engine playing " + video.type);
    }); });
  </script>

<div class="flowplayer fixed-controls no-toggle no-time play-button obj"
      style="    width: 85.5%;
    height: 80%;
    margin-left: 7.2%;
    margin-top: 6%;
    z-index: 1000;" data-key="$812975748999788" data-live="true" data-share="false" data-ratio="0.5625"  data-logo="">
      <video autoplay="true" stretch="true">

         <source type="application/x-mpegurl" src="http://live.wmncdn.net/safaritv2/live2.stream/index.m3u8">
      </video>   
   </div>

Flowplayer.orgのWebサイトでさまざまな方法を利用できます。

4
Jithu Wilson C