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

映像配信

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

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

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

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

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

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

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

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のコマンドオプションはこちらのサイトで確認できます。

Screenshot of ffmpeg.org

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

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

Screenshot of www.videolan.org

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

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

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の配置方法はこちらをご参考ください。

video.jsのインストール配信まとめ
Nginxをrtmpで受け、HLSストリーミング化して、web配信 webプレーヤはvidejsを利用する。 Nginx+rtmp+HLSストリーミングの実現はこちら 事前準備 npm install 途中でエラー出るnode.jsの古いバ

 

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

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

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

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

            add_header Cache-Control no-cache;
        }

ホームページでベーシック認証をかけていると、パスワードを何度も聞かれて困る事があります。これは、ベーシック認証が聞かれる範囲にtsファイルを置いた時に、それぞれのファイルに対してベーシック認証を聞かれてしまうからです。1度認証すれば大丈夫にするときには、ファイルのアクセス権を確認しましょう。

Debianですと、www-data というユーザでwebアクセスする事が定番(apacheの話ですが)なので、nginxをコンパイル擦る時にwww-dataで設定しておきました。

hlstest#chgrp www-data *

とする事で、ベーシック認証が何度も聞かれる事が無くなりました。

タイトルとURLをコピーしました