HLSオンデマンド映像を作成　webプレーヤーで再生

本ページは広告が含まれています。気になる広告をクリック頂けますと、サーバ運営費になります(^^

HLSのVODを作成したい
ライブストリーミングとビデオオンデマンド(VOD)の違い
ストリーミングとHTML5のビデオ再生の違い
mp4などビデオソースからHLS(tsファイル）の作成
VLCプレーヤーで再生
webプレーヤーで再生
ちょっとしたセキュリティをかける
何度もベーシック認証が入る

HLSのVODを作成したい

HLSのライブストリーミングは、nginx と rtmp-moduleの組み合わせで実現しました。

今度は、HLSのビデオオンデマンド(VOD)映像を作成してみます。ffmpegを利用すると簡単に作成できます。

ライブストリーミングとビデオオンデマンド(VOD)の違い

ライブストリーミングは、Live streamingで、生中継です。エンコードした動画をそのままリアルタイムに中継します。

ビデオオンデマンドは、需要がある時だけ再生でき、いつでも好きな場所を見る事ができます。

HLS配信形式でのビデオオンデマンド(VOD)の作成は簡単にできます。ライブストリーミングよりも楽ちんです。

ストリーミングとHTML5のビデオ再生の違い

ファイルをダウンロードしながら再生する方式です。大きなファイルをダウンロードしてから再生すると、ダウンロードに時間がかかりなかなか再生が始まりません。最近HTML5のvideoタグを用い、mp4などを直接ストリーミングできるようになりましたが、純粋にストリーミングというと、逐次再生されてパソコンにはデータが残らない方式をいいます。

mp4などビデオソースからHLS(tsファイル）の作成

ffmpegを利用します。予め用意されているinput.mp4（ビデオソース）をhls形式に変換します。

ffmpeg -i input.mp4 -hls_list_size 0 -hls_time 60 test.m3u8

-hls_list_size 0

プレイリストエントリの最大数を設定します。0に設定すると、リストファイルにすべてのセグメントが含まれます。

プレイリストは作成される、test.m3u8ファイルの事です。この中に、tsファイルの順番が記載されています。

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:67
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:64.500000,
test0.ts
#EXTINF:59.000000,
test1.ts
#EXTINF:58.300000,
test2.ts
#EXTINF:60.166667,
test3.ts
#EXTINF:59.133333,
test4.ts

-hls_time 60

これだけで、1分ごとのtsファイルとして作成できます。

ffmpegのコマンドオプションはこちらのサイトで確認できます。

VLCプレーヤーで再生

できたm3u8ファイル、tsファイルをwebで公開できる位置におきます。それだけで、VLCプレーヤで再生できるようになります。

映像配信関係を行うとVLCプレーヤーは重宝します。

VLCプレーヤでネットワークストリームで開くをし、URLにm3u8ファイルの場所を指定します。

http://test.hoge.com/hlstest/test.m3u8

webプレーヤーで再生

VLCプレーヤで再生できる事を確認できたら、用途に応じてwebプレーヤーなどを配置します。確認したところEdgeは直接m3u8ファイルを指定しただけで再生できますが、Chromeはダメです。再生できます。無料で利用できるvideo.jsでHLSが再生できるようにします

<html>
   <head>
      <link href="../../live/videojs/video-js.css" rel="stylesheet">
      <script src="../../live/videojs/video.js"></script>
      <script src="../../live/videojs/videojs-contrib-media-sources.min.js"></script>
      <script src="../../live/videojs/videojs-contrib-hls.min.js"></script>
   </head>
   <body>
      <video id="rtmp_div" class="video-js vjs-default-skin" autoplay="autoplay" controls="controls" width="1280" height="720" data-setup="{}">
      <source src="http://test.hoge.com/hlstest/test.m3u8" type="application/x-mpegURL" />
      </video>
   </body>
</html>

HLSを再生するためのvideo.jsの配置方法はこちらをご参考ください。

https://www.techlive.tokyo/archives/1310

ちょっとしたセキュリティをかける

このままだと、映像はベーシック認証などなくそのまま直リンクで見られてしまいます。

セキュリティをかけたい時はリファラくらいは確認して直リンク防止、ベーシック認証後再生できるようにします

nginxでしたら指定のHTMLにアクセスした後だけ、このビデオファイルにアクセスさせるというのはこのように書きます。リファラは詐称する事ができるので完璧な対策ではないですが、直リンクで簡単に再生はできなくなります。

        location ~ ^/onhls/ {
            valid_referers server_names test.hoge.com;
            if ($invalid_referer) { return 403; }

            add_header Cache-Control no-cache;
        }