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

 

もう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 を使ったことで、携帯しか持っていない劇団員への動画配信ができました。

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

ICTCacao

PRGLOG

アクティトラック HA7

たかが軽トラ、されど軽トラ。どうせならカッコよく乗りたいと思う還暦オヤジのアクティトラック改造記録。

iMac or Mac mini 2

M1 Mac miniが届いた。iMacをターゲットディスプレイモードで使おうと先にThunderbolt 3(USB-C) to Thunderbolt 2 変換ケーブル(5,280円)を買ったが、
結局、ターゲットディスプレイモードで使用することが出来なかったという情けないハナシ!

iMac or Mac mini

新しいiMacがM1プロセッサーを搭載して発表された。どうする、ポチるか?

StarryLandscapeStacker

天の川写真の現像ってよくわからないハナシ

TCPDFを行・列指定で利用する

TCPDFは、PHPでPDFを出力できるオープンソースのクラスだ。このままでも十分に使えるのだが、もっと便利に使えないかとの思いから自分用のライブラリーを使っている。

ランダムで毎回変わる日本語ダミーテキスト

ランダムな日本語ダミーテキストを作ってみた

カメラを買ってしまった!

これまで使っていたCANON EOS 6DmkⅡからSONYのα7RⅣに乗り換えることにした!

ライブコマース始めます。

畑から新鮮野菜などその場で販売するライブコマース始めます。

H2Aロケット45号機打ち上げ

今年の12月は、C/2021A1レナード彗星や流星群の撮影、そしてH2Aロケット打ち上げ。結構精力的に夜活した。

ATEM Mini Pro2台でExtremeなライブ

ATEM Mini Pro ISOをライブイベントで使ってみたらATEM Mini Pro ISOだけじゃ足りなかったというハナシ。

SAMYAN MF14mm F2.8 MK2

今年も天の川シーズンに突入!早起き生活2021

グループウェアにWebメールを組み込んでみた

Roundcube webmailを使ってグループウェアにメール機能を追加できた。

フラワームーン

2020年5月8日の満月の夜