WordPressでHLS形式の動画を配信してみよう

今回はWordPressでHLS(HTTP Live Streaming)形式で動画を配信する方法を紹介したいと思います。

HLS形式にすることにより、回線が弱い人でも快適に動画を視聴することができます。

実際に見てみる
1.HLS形式の動画を準備する
2.使用するサーバーにフォルダを上げる
3.記事内にHLS動画を埋め込む
おまけ～スクリプトの説明～
終わりに

実際に見てみる

下の動画はこのサイトから配信しているHLS形式の動画になります。
複数解像度の動画を用意しているので回線環境にあった画質で送信されます。
現在視聴している画質は左上に記載されています。

1.HLS形式の動画を準備する

配信するにはHLS形式の動画を準備しなければなりません。

上記の動画のように複数解像度の動画を準備するのは非常に面倒です。

そこで、windows限定ですが簡単に作れるバッチファイルを作成しました。

FFmpegというソフトを使用するので、まだ導入してない場合は下記の記事を参考に導入してください

導入が完了したら「HLS作成さん.zip」をダウンロードしてください。

フォルダ内のREADMEをお読みの上、自己責任での使用をお願いします

HLS作成さんダウンロード

解凍すると「HLS_Sakusei_San」というフォルダがあるので好きなところに置いてください。

フォルダを開くと「Drop_30fps.bat」、「Drop_60fps.bat」という2種類のファイルがあります。

元動画に近いフレームレートのファイルに変換したい動画ドロップします。

するとコマンドプロンプトが開いてエンコードが始まります。

エンコードが終わると「HLS_Sakusei_San」フォルダの「video」にエンコードされた動画が入っています。

このバッチを使用すると必ず240p、360p、480p、720p、1080pが生成されます。

videoフォルダはバッチを起動するたびに初期化されるので、名前を変更するか別の場所に移動してください。

2.使用するサーバーにフォルダを上げる

使用しているレンタルサーバーなどにフォルダを上げます。

各サーバー会社が用意しているファイルマネージャーやFTPを使用して上げてもいいですが、今回はWP File Managerというプラグインを導入してアップロードしたいと思います。

File Manager

ファイルマネージャでは、ファイルやフォルダの編集、削除、アップロード、ダウンロード、コピー、貼り付けを行うことができます。

フォルダが乱立するのを防ぐ為に、今回はwp-contentの下にHLS-Videoというフォルダを作り、その中にvideoフォルダを丸上げします。

フォルダ内は相対パスになっているので、階層を弄ると上手く動作しない可能性があります

videoやHLS-Videoなどのフォルダ名は一例なので好きなものに変更しても大丈夫です。

ただ、日本語名は避けてアルファベットを使用しましょう。

3.記事内にHLS動画を埋め込む

記事の中にHLS動画を埋め込みましょう。

ブロックを追加から「カスタムHTML」を選択し、下記のコードを入力します

HLS埋め込みスクリプト

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="hls" preload="metadata" controls="" width="100%" playsinline="" poster="サムネURL"></video>

<script>
  var videoSrc = 'm3u8のパス';
  var video = document.getElementById("hls");
      video.volume = 0.5;
var config = {maxBufferLength: 12,maxBufferSize: 10 * 1000 * 1000
};
  if (Hls.isSupported()) {
    var hls = new Hls(config);
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    var hls = new Hls(config);
    video.src = videoSrc;
  }
</script>

HLSはAppleが作ったのでApple系の製品は対応してますがChromeなどは純正のままだと非対応です。
なのでhls.jsというスクリプトを使用しています。

このスクリプトで設定する必要があるのは以下の三点です。

1. poster=”サムネURL”
2. var videoSrc = ‘m3u8のパス’
3. video.volume = 0.5

1. poster=”サムネURL”

posterは再生前に表示される画像です。
設定しなくてもいいですが、見栄えが悪いので設定する事をおすすめします。
「サムネURL」という文字は消してください。

2. var videoSrc = ‘m3u8のパス’

var videoSrc = ‘m3u8のパス’は先ほどアップロードした「video」フォルダのmaster.m3u8ファイルがある場所を指定します。
「m3u8のパス」という文字は消してください。

3. video.volume = 0.5

video.volume = 0.5は再生時の音量ボリュームを調整します。
最大は1.0なので0.5の場合は再生ボタンを押したときの音量が半分になります。

最後にこれらを設定した場合の完成例を見てみましょう

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="hls" preload="metadata" controls="" width="100%" playsinline="" poster="https://example.com/samune.jpg"></video>

<script>
  var videoSrc = 'https://example.com/HLS-Video/video/master.m3u8';
  var video = document.getElementById("hls");
      video.volume = 0.5;
var config = {maxBufferLength: 12,maxBufferSize: 10 * 1000 * 1000
};
  if (Hls.isSupported()) {
    var hls = new Hls(config);
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    var hls = new Hls(config);
    video.src = videoSrc;
  }
</script>

このようにすれば、比較的簡単にHLS動画を記事内に埋め込む事ができます。

カスタムHTMLにはプレビューボタンがあるので、その場できちんと動くか確認することもできます。

おまけ～スクリプトの説明～

もし詳しく知りたい方がいた時の為に、スクリプト内で何をしているか説明したいと思います。
上記で触れたものは無視します。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="hls" preload="metadata" controls="" width="100%" playsinline="" poster=""></video>

<script>
  var videoSrc = 'https://example.com/video/master.m3u8';
  var video = document.getElementById("hls");
      video.volume = 0.5;
var config = {maxBufferLength: 12,maxBufferSize: 10 * 1000 * 1000
};
  if (Hls.isSupported()) {
    var hls = new Hls(config);
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    var hls = new Hls(config);
    video.src = videoSrc;
  }
</script>

https://cdn.jsdelivr.net/npm/hls.js@latest
hls.jsを読み込むためのものです。

video id=”hls”
「hls」というidを読み込んでいます。
スクリプト内の「hls」部分(document.getElementById(“hls”)、video id=”hls”)を別の同一名にすると、別idになります。

preload=”metadata”
サイトを開いたときメタデータのみ読み込む設定です。(意味ないかも)

playsinline=””
全画面再生じゃなく記事の中で再生させるための設定です。

controls=””
ブラウザ標準の再生プレイヤーを利用するので、再生や音量などのコントロール部分を表示させています。

width=”100%”
レスポンシブルデザインに対応させるものです。
80%だとカラム幅の80％の大きさになります。

maxBufferLength: 12,maxBufferSize: 10 * 1000 * 1000
hls.jsを制御するものです。
12秒を超えない程度に読み込みを行います。サイズは10Mぐらいまで。（割と曖昧）
ネイティブで動く環境（Safari）などの場合は無視されます。

if (Hls.isSupported())～else if (video.canPlayType(‘application/vnd.apple.mpegurl’)の部分
HLSがネイティブで再生ができる環境か確認して、不可能な場合はhls.jsを利用する。
iPhoneのSafariなどに対応させる為のもの。