新型コロナウイルスの影響で、集合型の研修などの開催が困難になってきており、動画の需要が増えている印象です。
実際に社内研修でも動画配信をする話も出ています。
そこで、今回はHTML5から使えるようになった<video>タグと動画配信システムを構築してみようと思います。
おおまかな手順は以下の通り
- iMovieなどで編集した動画ファイルを用意する（MP4形式）
- MP4をストリーミング形式で使用するm3u8ファイルに変換する
- hls.jsを使ってコーディングする
iMovieなどで編集した動画ファイルを用意する（MP4形式）
これはこちらの記事（https://financial-pharmacist.blogspot.com/2020/08/blog-post.html）で以前に動画の作り方については簡単に触れているので今回は割愛します。
MP4をストリーミング形式で使用するm3u8ファイルに変換する
m3u8についてはWikipediaに以下のように書いてあります。
M3Uフォーマットの一般的な使用方法として、単一のエントリにURLを記述することがあげられる。このファイルのおかげで、ストリーミングへのアクセス、ウェブサイトからのダウンロード、インターネットラジオの視聴が容易になる。
iOSのHTTP Live Streamingフォーマットは"M3U" and "M3U8" ファイルをもとにしている。
ストリーミングの特長は以下の通り。こちらもWikipediaより。
通常、ファイルはダウンロード完了後に開く動作が行われるが、動画のようなサイズの大きいファイルを再生する際にはダウンロードに非常に時間がかかってしまい、特にライブ配信では大きな支障が出る。そこで、ファイルをダウンロードしながら、同時に再生をすることにより、ユーザーの待ち時間が大幅に短縮される。
見るのも快適ですが、少しずつダウンロードしながら再生するので、通信量の点でも見た部分のダウンロードしかされないのでメリットがあります。
というわけで、ストリーミング用にmp4をm3u8に変更する必要があります。
私はmacを使っているので、Appleの公開している「HTTP Live Streaming Tools」を使います。ffmpegというソフトでもできるらしいですが、やっていません。
「HTTP Live Streaming Tools」のインストール
https://developer.apple.com/streaming/ こちらのページからダウンロードできます。
下の画像のStarting Tools内のView downloadsをクリック。
次の画面です。HTTP Live Streaming ToolsをクリックするとダウンロードをできるようになるのでHTTP Live Streaming Tools xxxxx.dmgをダウロードします。
インストーラをダブルクリックしてインストールします。/usr/local/share/hlstoolsにインストールされます。ターミナルから起動できるようになりました。
ターミナルでHTTP Live Streaming Toolsを起動して動画形式を変換する
前提として。
mp4ファイルはusers\(username)\moviesに保存してます。
ターミナルでカレントディレクトリをmoviesに移動してから次の処理をします。
変換後のデータ出力先としてusers\(username)\movies\hlsを作成しておきます。
以上、前提終わり。
ターミナルで以下のコマンドを入れます。
mediafilesegmenter -V samplemovie.mp4
すると
"samplemovie.mp4" can be segmented
と表示されればsamplemovie.mp4が有効なファイルであることが確認できます。
次に変換をします。以下のようにターミナルに入力します。
mediafilesegmenter -f hls -i index.m3u8 -B media- app.mp4
成功すると、フォルダ内にapp.plist、iframe_index.m3u8、prog_index.m3u8、fileSequence1.tsから連番のファイルサイズに応じた分の数の.tsファイルが出力されます。
以上で、MP4からm3u8ファイルへの動画の変換を終わりです。
あまりにも長くなりすぎたので、後編のコーディングは別のエントリーで書きます。
追記
0 件のコメント:
コメントを投稿