HLSでVIDEO ON DEMANDの動画配信をしてみた

> ブログ > HLSでVIDEO ON DEMANDの動画配信をしてみた

2024年5月30日更新

もう３０年以上友人たちと、地元（鹿児島県南九州市知覧）で演劇活動をしている。老後の楽しみと自慢話にとDVDも制作してきた。今回もDVDは作りますが、いち早く劇団員にはネット配信したいと思いいろいろ試してみたので、興味のあるひとはご覧ください。

　そもそも、動画の配信って埋め込みのhtml5の videoタグでいいんじゃない？と思って試しにやってみたら、1時間45分の作品の720pで4.18GBもあり、一旦動画ファイルをダウンロードする（と思っている）からとんでもなく遅い！ことがわかった。もしかすると自宅のネット環境が劣悪すぎるからかもしれない（いまだにADSLしかなくどんなときもWi-Fiも電波状態が劣悪）

　そこで、いろいろ調べてみると、プログレッシブダウンロードとかHLSとかVODとかで少しづつダウンロードしながら再生せせるといいことがわかった。

　HLSについては、難しいことはよくわからないが、つまり、短いmp4を作りカタログ化して少しづつ再生させるってことのようだ。ならば、HLSを作って配信すればいいってことね。

では、MP4のHLS化は、どうするのか？

Windowsならffmpegとかを使うようだが、制作環境が Mac なのでいろいろ調べてみたら、HLSは、元々Apple HTTP Live Streamingの略で、Apple社の独自規格ということがわかった。なら、Macでできない訳が無いよな！

　HTTP Live Streaming Toolsをデベロッパーサイトからダウンロードしたが、コマンドラインから使うみたいでよくわからない。探し方が良くないのか説明サイトも見つからない。
※最終的にはコマンドラインは使いました。

でも、ネットには、先駆者の方々がいろいろと教えてくれるので助かります。

参考記事プログレッシブダウンロードの参考記事

参考記事Video on demand (VOD) HLSをPCで作成https://qiita.com/khagi/items/6e8c8d10c77bee53487b

Qiitaは、毎回いろんなことを教えてもらえてとても助かります。

参考記事を読んでみると、bento4(https://www.bento4.com)を使いますとあった。

Bentoって昔のFileMakerじゃない？と思った昔からのAppleユーザーの皆さん！私もそのひとりです。

とにかくBento4をダウンロード。

Bento4-SDK-1-5-1-629.universal-apple-macosx.zip を解凍します。
Bento4-SDK-1-5-1-629.universal-apple-macosxというフォルダができた。

結局、ターミナルからコマンドラインで動かすようだ。

とりあえず、コマンドライン入力を少なくするためにフォルダ名をBento4にして/users/ICTCacao/の直下に移動した。

ICTCacaoは、ユーザー名です。

HLSの格納フォルダーを/users/ICTCacao/の直下にhlsフォルダとして新規作成。
hlsフォルダに 4.18GBの720p.mp4を格納した。

ターミナルを起動！

$ cd /users/ICTCacao/hls/
$ /users/ICTCacao/Bento4/bin/mp42hls /users/ICTCacao/hls/720p.mp4

ここで思わぬ事態。「悪意のあるプログラムかわからんからアップデートしろ」と言ってきた！ので、システム環境設定のセキュリティとプライバシーからデベロッパツールのターミナルにチェックを入れて再度実行すると、

おーー segment-xx.tsがたくさん！　

segment-0.tsからsegment-980.tsと stream.m3u8 が出来た！

なんだか、簡単！に出来た。

ローカル環境で

          ＜video controls src="./hls/stream.m3u8"
            poster="./thumb.png" width="720"＞
          ＜/video＞
		  
としてみると、Safariなら普通に再生できる。

HLS (HTTP Live Streaming) 形式の動画は、Safari (on Mac) であれば、HTML5 の videoタグですんなり再生することができるがそれ以外はうまくいかないらしい（適当に思っています）
昔、使ったことがあるvideo.jsのようなプレイヤーが必要らしい。

hls.jsがいいようだ。

参考記事（hls.jsでお手軽動画・生配信視聴プレイヤー作ってみた）

参考記事を参考にというか、まるっと利用させていただき完成したのでした。

HLS (HTTP Live Streaming) 形式にし　hls.js　を使ったことで、携帯しか持っていない劇団員への動画配信ができました。

著作の関係で、動画サイトは非公開としていますので、ご了承ください。