mp4をm3u8にコンバートしてwebに公開するまで

疑似ストリーミングのように動画を分割してファイルを全読み込みする前から再生する方法としてm3u8があります。
使い方が面倒ですが、サイズの大きな動画を配信するときは有効な手段なので覚えておくと良いです。

・・・今回はステップが長いので肝心なところを抑えてかなり省略してます。

使った物

HTML動画プレーヤー：http://videojs.com/
mp4のコンバート：XMedia Recode
tsファイルの分割：httpsegmenter
動画の静止画キャプチャ：gomplayer
web用に適切なビットレート変換：http://jp.any-video-converter.com/any-video-converter-free.php

動画の静止画キャプチャ

動画サムネイル用のキャプチャにはgomplayerを使いました。
http://www.gomplayer.jp/player/option/function_videocap.html

web用に適切なビットレート変換

ビットレートがどれぐらいが最適かわからないのでこのソフトにお任せしています。
Any Video Converter
http://jp.any-video-converter.com/any-video-converter-free.php
ここでファイルのサイズを最適化しておきます。

tsファイルに変換

XMedia Recodeを使います。
形式は「MPEG TS (DVB TS)」、拡張子「ts」を指定。
気を付ける点は音声トラックの設定でモードが「変換」になってる場合は注意。
初期設定になっていた「MP2」ではwebでは再生できなかったのでモードを「コピー」にしました。

tsファイルの分割

TsSplitterというGUIのソフトもあるのですが、m3u8を作ってくれないので今回はコマンドで行うhttpsegmenterを使いました。

segmenter.exeコマンドパラメーター
-i 分割したいMPEG TSファイル名
-d 分割したい秒数
[-o 分割したときの先頭ファイル名]
-x 出力するm3u8ファイル名
[-p http-prefix]
[-w live-segments]
[–watch-for-kill-file]
[–strict-segment-duration]

以下実行結果
（hoge.tsを10秒毎に分割　分割ファイル名のprefixをhogeにしてhoge.m3u8ファイルの作成）

C:\***>segmenter.exe -i hoge.ts -d 10 -o hoge -x hoge.m3u8
[mpegts @ 0x1724820] max_analyze_duration 5000000 reached at 5000000
Output #0, mpegts, to ‘hoge’:
Stream #0:0: Video: h264 ([27][0][0][0] / 0x001B), yuv420p, 640×360, q=2-31, 90k tbn, 25 tbc
Stream #0:1: Audio: aac ([15][0][0][0] / 0x000F), 48000 Hz, stereo, 129 kb/s
[mpegts @ 0x1dec020] muxrate VBR, pcr every 5 pkts, sdt every 200, pat/pmt every 40 pkts

TSSplitter 日本語化

HTMLにvideojsプレーヤーの埋め込み

tsファイルに対応しているhttp://videojs.com/を利用しました。
非対応のブラウザではフラッシュプレーヤーに切り替わる機能もあったハズ。

動画プレーヤーが立ち上がっても下記のエラーが出て再生できない場合は動画の指定しているサイズが違うからです。
video.jpを呼び出しているwidthとheightの指定を確認しましょう。

‘webkitMovementX’ is deprecated. Please use ‘movementX’ instead.
‘webkitMovementY’ is deprecated. Please use ‘movementY’ instead.

参考サイト

今更ながらにHLS配信（HTTP Live Streaming）をやってみた

追記

2017/02/13 Any Video Converterを追記