CentOS7+Apache2.4+Python3.6環境でmp4動画をHLS配信(video.js)

昨今ではWebサイト上で動画を再生させることも少なくないですが、通信速度に合わせて遅延なくHTTPプロトコルで送信できるHLSによる動画配信をしてみましたので、手順をまとめておきます。

今回の技術は主にWebサイト上の背景を動画にしたりする用途で等で使えます。

環境・前提条件・使用技術など

  • CentoOS7.6
  • Apache2.4
  • Python3.6

今回は、上記の環境が準備済みの状況から始めます。

Pythonのインストールは以下の記事を参考にしてください。

Python3.6+Django2.2のインストール・アプリ生成【Djangoファイルの基本構成】

環境確認

HLS形式とは?

HLS形式は、米アップルによって開発された、動画をストリーミング送信するためのプロトコルの1つで、HTTPライブストリーミングを意味する英語「HTTP Live Streaming」の略から来ています。

元動画を細切れにした「MPEG-2 TS」ファイルの再生順や、暗号化の鍵、コンテンツのバリエーションなどを書き込んだM3U8形式の「プレイリスト」に記載しておきます。
これらのファイルをWebサーバーから順次配信することで、ネット環境に応じて低ビットレートでも再生しやすくなっています。

HLS形式についての詳細は以下などをご覧下さい。
https://k-tai.watch.impress.co.jp/docs/column/keyword/515059.html

今回の設定手順

  1. ffmpegのインストール
  2. 配信したいmp4動画をffmpegでM3U8形式に分割
  3. video.jsの設置

ffmpegのインストール

まず、配信したい動画(mp4形式)を分割するためのツールffmpegをインストールします。

インストール手順は以下で紹介されていたものを参考にさせて頂きました。
https://fukatsu.tech/centos-ffmpeg

Nuxリポジトリを追加

NuxリポジトリはEPELリポジトリに依存しているので、EPELリポジトリが有効になっていない時は、以下のように有効化します。

Nuxリポジトリを有効化

Nuxリポジトリを有効にしてGPGキーをインポートします。

yumでインストール

リポジトリが有効になったら、FFmpegをインストールします。

インストール・バージョンの確認

以上でffmpegのインストールは完了です。

配信したいmp4動画をffmpegでM3U8形式に分割

ffmpegのインストールが完了したら、ffmpegを使ってmp4形式の動画をM3U8形式に分割します。

以下のサイトを参考に、m3u8 と ts を作るところまで実施します。
https://k-tai.watch.impress.co.jp/docs/column/keyword/515059.html

インストールもそうなのですが、内容は上記サイトをほぼそのままなので割愛します。

“HLSの録画”という部分は今回の対象外なので”HLSの作成”というところだけ実施し、M3U8形式のファイル作成まで実施しました。

video.jsの活用

一応、ここまでで作成したM3U8形式の動画をHTML上のvideoタグで指定すれば再生はされます。

しかしながら、HLSは先述の通り、米アップル社によって開発されたプロトコルなので、ブラウザによって再生出来るものと出来ないものがあります。

具体的には、EdgeやSafariでは再生出来ますが、ChromeやFirefoxではネイティブでは再生できません。

そこで、ChromeやFirefoxでも再生できるようにするにvideo.jsというライブラリを活用します。

video.jsはバージョンによって設定が少し異なるようです。以前は複数のJSファイルの設置が必要だったようですが、最新版ではvideo.jsだけの読み込みで可能となっています。

video.jsは以下GitHubより最新版をダウンロードしてください。

GitHub

video.jsを任意のディレクトリに設置し、HTML上から指定すると以下のような形になります。

[任意URL]の部分は各環境に合わせてください。

今回はWEBサイトの背景用なので(上記サンプルは背景指定ではありません)、video-jsタグのオプションは横幅をブラウザサイズとし、自動・ループ再生でChromeやFirefoxでも再生できる指定です。

video.jsの設定方法はチュートリアルをご覧下さい。

一応、こちらの設定で意図通りHLSの分割読込形式でWEBサイトの背景の動画再生ができました。

画像では数回目のアクセスなのでdisk cacheになっていますが、chromeでも再生可能でした。