動画投稿サイトを使わずにWEBサーバーで動画をストリーミング配信する【HLS】【FFmpeg】

動画投稿サイトを使わずにWEBサーバーで動画をストリーミング配信する【HLS】【FFmpeg】 インターネット
2022.10.11

企業や個人のWEBサイト、またはブログ記事などに動画が埋め込まれていることがよくあります。それらの多くはYouTubeなど外部の動画投稿サイトに投稿した動画を埋め込むことで実現しています。

では、完全に自分の管理するWEBサーバーだけで動画をストリーミング配信することはできるのか？

それが今回の記事のテーマになります。

なお、今回の記事は以下のような人向けです。

  • Windowsを使っている人または記事の内容を他のOSに読み代えられる知識のある人
  • HTML・JavaScriptがわかる人
  • レンタルサーバー(ホステイング)、VPSなどを運用したことがある人

まずHLS動画のサンプルです

この猫の動画は僕が作成したもので、YouTubeやニコニコ動画といった外部サイトは利用しておらず、動画データは僕が管理しているWEBサーバー上に存在しています。つまり外部のサービスに依存することなく僕は僕のサイト上で動画を公開できているということです。

ここではHLSという仕組みを使ってWEBブラウザで動画を再生することを実現しています。

ちなみに僕が利用しているサーバー会社はエックスサーバー(Xserver)の個人用レンタルサーバープラン(ホスティング)です。法人プランやVPSなどではありません。エックスサーバーの場合、特にHLSのための特別な設定を施すことなくHLS方式での動画配信が可能でした。

HLSとは？

HLSとは(HTTP Live Streaming)の略です。

動画ストリーミングと聞くと、以下のような印象を持っている方もおられるのではないでしょうか。

「動画ストリーミングの仕組みを作るのってすごくお金かかるんでしょう？」

「動画ストリーミングの環境を運用するにあたりランニングコストが心配だ」

しかしHLSの場合は通信にHTTPを使用し特別なプロトコルを必要としないため、WEBサーバー側やクライアント側に高いコストをかけてわざわざ専用のソフトウェアをフルスクラッチで構築したり、専用の高価なハードウェアを用意する必要などなく、ごく一般的なWEBサーバーとWEBブラウザの組み合わせで配信および視聴環境を実現可能です。

この手軽さという点では、HTMLファイルを更新してWEBサーバーにアップロードしたり、あるいはWordpressなどのCMSで記事を書いて公開したり、というイメージとなんら変わるところはありません。

動画サイトに依存するリスク、自前で動画配信するリスク

動画サイトに依存するリスク

多くの動画投稿サイトは無料で、アカウントさえ作成すれば誰でも動画を気軽に投稿することができます。ですので主に広告主への配慮の上から好ましくない動画は様々な形で冷遇を受けるし、最悪の場合は動画を削除されてしまうこともあります。

実際に僕が聞いた例では、以下のような例があります。なおこれらはあくまでも僕個人が見聞きしたことなので事実とは異なる可能性もあることはご了承ください。

  • 医療系のチャンネルで手術動画を公開したら動画が削除されてしまった(おそらく暴力的または残酷なコンテンツと判定された)
  • 世間に大きなインパクトを与えかねないワードが含まれた動画が削除された(伝染病、大災害、大事件などの具体的な名前)
  • 広告主の商品や会社体質を批判する動画が削除されてしまった
  • 銃に関係したコンテンツが削除された

繰り返しますが、これらの出来事には真偽のほどは定かでないものも含まれます。しかし動画配信サイトも所詮はひとつの営利追及企業が運営しているサービスであり、その利益に貢献しない、あるいは害をもたらすとみなされた動画に対して不条理とも思える処分が下されるということは、考えてみれば当たり前のことでしょう。

「まっとうな動画だけ上げていれば削除なんてされないはずだ」

と思う方もおられるかもしれませんが「まっとう」の基準が国や文化、企業ごとの倫理によって異なるのがこうした混乱を生んでいる要因の一つなのではないかと僕は考えます。

いずれにせよ、動画投稿サイトの動画が削除されてしまったり、アカウントが凍結されてしまった場合、それらの処分が不当なものであると申し開きをしても聞き入れられるとは限りませんし、復活まで長い時間を要する場合も珍しくありません。そうした事態の際に運用を止めない手段を用意しておくという意味でも自前で動画を配信できる環境について知識を持っておくことは無駄ではないと思います。

自前のWEBサーバーで動画配信するリスク

転送量に注意

動画を配信するとテキストや画像とは比べ物にならないほど多くの転送量を使うことになります。YouTubeなどの外部サイトにアップロードしていればこうしたことを意識する機会はほぼありませんが、自前で動画を配信するなら転送量も常に気を配っていなければなりません。

もしも動画がバズって1、膨大な数のアクセスが集中した場合にはとんでもない量のネットワーク転送量が発生し、あなたが契約しているサーバー会社からサーバーへのアクセスを遮断されたり、契約によっては追加料金を請求されるなどの展開もあり得ますので事前に確認が必要でしょう。

HLS配信が行えないサーバー

僕は日本国内、海外も含めて何社かのサーバー会社を使った経験がありますが、HLS配信が全く許可されていない、明示的にブロックしているサービスには当たったことがありません。基本的にVPSなら契約の転送量の範囲内でなんでも自由にすればいい話ですし、レンタルサーバー(Hosting)の場合でもたいていの場合は何も特別な設定を必要としない場合がほとんどだと思います。

ですがもちろん、契約する前にはサポートに問い合わせたほうがベストであることは言うまでもありません。

HLSを使った動画配信があなたのWEBサーバーで可能かどうかチェック

ここでは、あなたが使っているWEBサーバーがHLS配信に対応しているかどうか簡単にチェックできる方法をまとめました。

動画をWEBサーバーにアップロード

この圧縮ファイルは僕が動画再生テスト用に作成したHLS形式の動画ファイル一式です。よければお使いください。サイズは5.2MBほどです。こちらの動画は上記の猫の動画と同じですが、WEBサーバー上にてHLS形式で再生できるかどうかだけを確認できればいいという理由＆ネットワークへの負荷を考慮して低解像度(320×180)、低ビットレートでエンコードしたものです。

HLS

圧縮ファイルを展開するとこの通り11個のファイルが入っています。後述しますがこれがHLS形式で動画をストリーミングする際のフォーマットです。1本の動画を細かくカットすることで任意位置での再生開始やシークを可能にしています。

圧縮ファイルを展開できたら、これらのファイルを全部、あなたのWEBサーバーの任意のディレクトリにアップロードしてURLでアクセス(https://～)できるようにしておいてください。

外部JavaScriptをロードします

https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
https://cdn.jsdelivr.net/npm/hls.js@latest

適当なテスト用のHTMLファイルを作成してください。そして上記のJavaScriptファイルがHTMLにロードされるようにしてください。2つ目のファイルがHLSを再生させるためのものです。1つ目は単に僕が今回のソースでJQueryを使ってるために必要というだけです。

「jQueryなんか嫌いだ！」という方は、後で紹介するJavascritのほうをお好きにネイティブJavaScriptに修正していただければいいかと思います。

ちなみに、Wordpressの場合は使用しているテーマのfunctions.phpに以下のように関数を追加して「wp_enqueue_scripts」にフックさせてやることで読み込ませるスクリプトを追加できます。

// Javascript, cssの読み込み
function load_other_scripts() {
  $plugin_url = plugin_dir_url( __FILE__ );
  wp_enqueue_script('custom_script_1', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js');
  wp_enqueue_script('custom_script_2', 'https://cdn.jsdelivr.net/npm/hls.js@latest');
  
}
add_action('wp_enqueue_scripts', 'load_scripts');

HTMLにHLS再生のための記述を追加してサーバーにアップロード

<video id="my_video" controls poster="https://yourdomain.net/wp-content/video/cat/poster.jpg"></video>
  <script>
      const _hls = new Hls();
      if(Hls.isSupported()) {
        var video = document.getElementById('my_video');
        _hls.loadSource('https://yourdomain.net/wp-content/video/cat/cat_video_asashin1com.m3u8');
        _hls.attachMedia(video);
        
        video.autoplay = true;
      }
  </script>

このソースをあなたのHTMLに追加してください。1行目と6行目のURLをあなたのWEBサーバーとアップロードした場所に応じて適切に変更することを忘れないでください。

記述を追加できたら、HTMLをあなたのサーバーにアップロードします。

ブラウザからHTMLにアクセスして確認

アップロードしたHTMLにWEBブラウザからアクセスして、このブログ記事の冒頭と同じ猫の動画が再生できれば、あなたのWEBサーバーはHLS再生に対応しています。

HLSに対応した動画の作り方

さてここからは、MP4形式の動画をHLS方式での再生に対応した形式に変換する方法を説明します。冒頭で述べたようにWindows PCとFFmpegを使います。

FFmpegのダウンロードとインストール

FFmpegのダウンロード

ffmpeg

FFmpegの公式サイトのダウンロードページを開きます。「Get packages & executable files」の下にある「Windows EXE Files」のさらに下の「Windows builds by BtbN」のリンクをクリックし、github.comの該当ページに移動します。

github.comの該当ページの一覧から任意のファイルをダウンロードします。僕は「ffmpeg-master-latest-win64-gpl-shared.zip」をダウンロードしました。

FFmpegをPCにインストールする

FFmpeg

FFmpegのインストールは、ダウンロードした圧縮ファイルを展開して任意の場所に配置するだけで完了です。圧縮ファイルを展開するとフォルダ構成はこのようになっています。

僕は、D:\Program Files\ffmpeg\bin\ffmpeg.exe として配置しました。

MP4動画の準備

MP4動画をHLSで配信するための形式に変換しますので、なんでもいいので適当なMP4動画ファイルを準備してください。Pixaboyなどに無料素材はたくさんあります。

やることは、FFmpegに対して動画ファイルのパスを引数として渡してやることに加えて、HLSに適した引数も渡してやるだけです。そこまでを簡単に実現するためのバッチファイルを作成しました。

バッチファイルを作りました

何をするバッチファイルなのか

まず、このバッチファイルはファイルがドロップされることを必須としています。動作としては以下になります。

  • ドロップされたファイルと同名のフォルダを動画ファイルと同じ階層に作る(以下、ターゲットフォルダと記載)
  • FFmpegにドロップされたファイルとHLS作成のための引数を渡して実行させる
  • FFmpegがターゲットフォルダにHLS関連ファイルを出力する
@echo off

rem 引数がない場合は終了する
if "%~1"=="" (
  echo 引数がありません
  pause
  exit /b
)

set ffmpeg="D:\Program Files\ffmpeg\bin\ffmpeg.exe"

rem ドロップしたファイルのフルパス（ダブルクオートなし）
set source_file=%~1

rem ドロップしたファイルの拡張子だけ（ピリオド含む）「.txt」
set ext=%~x1

rem ドロップしたファイルが格納されたフォルダのフルパス「C:\work dir\」
set source_dir=%~dp1

rem ドロップしたファイルのファイル名だけ（拡張子を除く）「test」
set id=%~n1

rem 動画保存用ディレクトリ作成
mkdir %source_dir%%id%

cd %source_dir%%id%

%ffmpeg% -i %source_file% -c:v copy -c:a copy -f hls -hls_init_time 6 -hls_time 6 -hls_playlist_type vod -hls_segment_filename %source_dir%%id%\%id%_%%02d.ts %source_dir%%id%\%id%.m3u8

10行目の以下の部分

set ffmpeg=”D:\Program Files\ffmpeg\bin\ffmpeg.exe”

を、あなたがFFmpegをインストールした場所のパスに合わせて変更することを忘れないでください。そして適当な名前でバッチファイルを保存します（hls.batなど)。

あとはHLS形式で配信したい動画ファイルをバッチファイルにドロップするだけです。ソース動画が分割されてHLSで配信可能な形式になったでしょうか。

なお、このバッチファイルは2次利用を含めてご自由に利用・改変いただいて構いません。

おわりに

今回の記事ではHLS方式を使用した動画ストリーミングについて解説しました。最後まで読んでいただいてありがとうございました。

  1. 特定の言葉、記事、個人などが注目されることで突如としてアクセスが増えること
タイトルとURLをコピーしました