FFmpegでMP4をHLS配信する方法【video.js・Apache】

2019.10.13

現在の環境でMP4をHLSへ変換する最小構成

この後のCentOS 7、Python 3.6、Nuxリポジトリを使う手順は旧環境向けです。HLSの生成にPythonは必須ではありません。新規環境ではサポート中のUbuntuやRocky LinuxなどへFFmpegを導入します。

Ubuntu系でFFmpegを導入

sudo apt update
sudo apt install -y ffmpeg
ffmpeg -version

VOD用のHLSファイルを生成

mkdir -p hls
ffmpeg -i input.mp4 \
  -c:v libx264 -c:a aac \
  -flags +cgop -g 60 \
  -hls_time 6 \
  -hls_playlist_type vod \
  -hls_segment_filename 'hls/segment_%03d.ts' \
  hls/index.m3u8

index.m3u8と複数の.tsファイルが作成されます。GOP長はフレームレートとセグメント長に合わせて調整してください。

ApacheのMIMEタイプ

AddType application/vnd.apple.mpegurl .m3u8
AddType video/mp2t .ts

ブラウザから別ドメインのHLSを読む場合はCORSも必要です。配信はHTTPSを使用し、生成ディレクトリへ不要な書き込み権限を与えないでください。

FFmpeg公式：HLS muxer／video.js公式

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

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

  • CentoOS7.6
  • Apache2.4
  • Python3.6
今回は、上記の環境が準備済みの状況から始めます。 Pythonのインストールは以下の記事を参考にしてください。 Python・Djangoのインストール関連記事

環境確認

$ cat /etc/redhat-release 
CentOS Linux release 7.6.1810 (Core) 

# apachectl -V
Server version: Apache/2.4.28 (Unix)

$ python3.6 --version
Python 3.6.8
▶▶▶ AWSより安くクラウドVPS

HLS形式とは？

HLS形式は、米アップルによって開発された、動画をストリーミング送信するためのプロトコルの1つで、HTTPライブストリーミングを意味する英語「HTTP Live Streaming」の略から来ています。 元動画を細切れにした「MPEG-2 TS」ファイルの再生順や、暗号化の鍵、コンテンツのバリエーションなどを書き込んだM3U8形式の「プレイリスト」に記載しておきます。 これらのファイルをWebサーバーから順次配信することで、ネット環境に応じて低ビットレートでも再生しやすくなっています。 HLS形式についての詳細は以下などをご覧下さい。
[ケータイ用語の基礎知識]第554回：HLS形式 とは
k-tai.watch.impress.co.jp

今回の設定手順

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

ffmpegのインストール

まず、配信したい動画(mp4形式)を分割するためのツールffmpegをインストールします。 インストール手順は以下で紹介されていたものを参考にさせて頂きました。
CentOS 6系,7系にFFmpegをインストールする手順｜新卒エンジニアの開発日記
FFmpegは動画を変換、編集などできるフリーソフトでターミナルで動かします。今回はFFmpegをCentOS6系、CentOS7系にインストールする方法をまとめていきます。
fukatsu.tech

Nuxリポジトリを追加

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

Nuxリポジトリを有効化

Nuxリポジトリを有効にしてGPGキーをインポートします。 
$ sudo rpm -v --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro
$ sudo rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm

yumでインストール

リポジトリが有効になったら、FFmpegをインストールします。 
$ sudo yum -y install ffmpeg ffmpeg-devel

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

$ ffmpeg -version
ffmpeg version 2.8.15 Copyright (c) 2000-2018 the FFmpeg developers
built with gcc 4.8.5 (GCC) 20150623 (Red Hat 4.8.5-36)
configuration: --prefix=/usr --bindir=/usr/bin --datadir=/usr/share/ffmpeg --incdir=/usr/include/ffmpeg --libdir=/usr/lib64 --mandir=/usr/share/man --arch=x86_64 --optflags='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector-strong --param=ssp-buffer-size=4 -grecord-gcc-switches -m64 -mtune=generic' --extra-ldflags='-Wl,-z,relro ' --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libvo-amrwbenc --enable-version3 --enable-bzlib --disable-crystalhd --enable-gnutls --enable-ladspa --enable-libass --enable-libcdio --enable-libdc1394 --enable-libfdk-aac --enable-nonfree --disable-indev=jack --enable-libfreetype --enable-libgsm --enable-libmp3lame --enable-openal --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-libschroedinger --enable-libsoxr --enable-libspeex --enable-libtheora --enable-libvorbis --enable-libv4l2 --enable-libx264 --enable-libx265 --enable-libxvid --enable-x11grab --enable-avfilter --enable-avresample --enable-postproc --enable-pthreads --disable-static --enable-shared --enable-gpl --disable-debug --disable-stripping --shlibdir=/usr/lib64 --enable-runtime-cpudetect
libavutil      54. 31.100 / 54. 31.100
libavcodec     56. 60.100 / 56. 60.100
libavformat    56. 40.101 / 56. 40.101
libavdevice    56.  4.100 / 56.  4.100
libavfilter     5. 40.101 /  5. 40.101
libavresample   2.  1.  0 /  2.  1.  0
libswscale      3.  1.101 /  3.  1.101
libswresample   1.  2.101 /  1.  2.101
libpostproc    53.  3.100 / 53.  3.100
以上でffmpegのインストールは完了です。

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

ffmpegのインストールが完了したら、ffmpegを使ってmp4形式の動画をM3U8形式に分割します。 以下のサイトを参考に、m3u8 と ts を作るところまで実施します。
[ケータイ用語の基礎知識]第554回：HLS形式 とは
k-tai.watch.impress.co.jp
 インストールもそうなのですが、内容は上記サイトをほぼそのままなので割愛します。 “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上から指定すると以下のような形になります。 
<html>
  <head>
    ...
    <link href="[任意URL]/video-js.css" rel="stylesheet">
  </head>
  <body>
    <video-js id=example-video class="vjs-default-skin covervid-video" data-setup='{"fluid": true}' muted autoplay loop>
      <source src="[任意URL]/hls/playlist.m3u8" type="application/x-mpegURL">
    </video-js>

    <script src="[任意URL]/video.min.js"></script>
    <script>
      var player = videojs('example-video');
    </script>
  </body>
</html>
[任意URL]の部分は各環境に合わせてください。 今回はWEBサイトの背景用なので(上記サンプルは背景指定ではありません)、video-jsタグのオプションは横幅をブラウザサイズとし、自動・ループ再生でChromeやFirefoxでも再生できる指定です。 video.jsの設定方法はチュートリアルをご覧下さい。 一応、こちらの設定で意図通りHLSの分割読込形式でWEBサイトの背景の動画再生ができました。 画像では数回目のアクセスなのでdisk cacheになっていますが、chromeでも再生可能でした。
タイトルとURLをコピーしました