現状の ffmpeg では VTT字幕と、映像と音声のセグメントを合わせたマスタープレイリストを作れないので、マスタープレイリストを編集しなければならない。2020年4月9日以降はVTT字幕と、映像と音声のセグメントを合わせたマスタープレイリストを作れるようになった。多くのブラウザがプレイリストの直接再生に対応していないのでライブラリを使う。さらに ARIB字幕のある動画はlibaribb24を有効化していないと変換できないうえ、有効化してないときは字幕を無効(-sn)にしないとエラーになる。有効化してないときは字幕の処理は行わない。

ffmpeg で Apple HTTP Live Streaming(HLS)を扱う

準備

HTML5 プレイヤの例

ffmpeg で HLS 出力するときに注意する点はいくつかあり、エンコード設定、解像度やフレームレート、ライブかVODか、遅延、視聴環境などそれぞれに対応する必要があるが、今回は試しやすい Windows10 での Edge、firefox、Chrome で再生確認し、配信環境を nginx、ngrok で作っている。

nginx: download
ngrok – secure introspectable tunnels to localhost

ngrok 導入方法 – Qiita
少しでも安全にngrokを使用する(Basic認証) – Qiita

ARIB字幕を変換するにはlibaribb24を有効にする。

ARIB字幕をdemuxする libaribb24

Windows 向けには お気に入りの動画を携帯で見ようの配布バイナリが対応している。

コーデックは H.264/AAC を使うので映像コーデックにはソフトウェアエンコード、ハードウェアエンコードそれぞれ配信環境に合わせて使う。AACエンコーダは配布できない FDK-AAC(-c:a libfdk-aac)があるので、こちらを試すなら media-autobuild_suiteでバイナリを用意して手動でlibaribb24を有効化する

通常のARIB字幕付きHLS配信

デュアルモノラルのときだけ音声コーデックをcopyすると HLS で再生できない。それ以外はコピーしても再生できる(はず)。

[確認]NHK解説放送のmp4エンコード · Issue #244 · l3tnun/EPGStation

ffmpeg -analyzeduration 10MB -probesize 10MB -fix_sub_duration -i input.ts -vf yadif,scale=1280:720 -c:v libx264 -c:a aac -c:s webvtt -map 0:v -map 0:a:0 -map 0:s -f hls -var_stream_map "0:v:0,a:0,s:0,sgroup:subtitle" -master_pl_name master.m3u8 -hls_list_size 0 720p.m3u8

master.m3u8 の出力例。

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subtitle",NAME="subtitle_0",DEFAULT=YES,URI="720p_vtt.m3u8"
#EXT-X-STREAM-INF:BANDWIDTH=140800,RESOLUTION=1280x720,CODECS="avc1.64001f,mp4a.40.2",SUBTITLES="subtitle"
720p.m3u8

字幕原語をつける書き換え例。

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subtitle",NAME="Japanese",DEFAULT=YES,LANGUAGE="jp",URI="720p_vtt.m3u8"
#EXT-X-STREAM-INF:BANDWIDTH=140800,RESOLUTION=1280x720,CODECS="avc1.64001f,mp4a.40.2",SUBTITLES="subtitle"
720p.m3u8

BANDWIDTHタグはビットレートの目安となり、DEFAULT, AUTOSELECT, FORCEDタグは字幕の表示設定に関わる。GROUP-IDタグで指定したものをSUBTITLESタグで指定することでそのストリームに字幕を載せることができる。

VTT字幕付きで再生するには hls.jsを使う。HLSを使って重い動画をWEBサイトに実装する – Qiitaを参考に、html ファイルを作成して、hls.loadSource 内のプレイリストを master.m3u8 に変更する。参照している(https://cdn.jsdelivr.net/npm/hls.js@latest)は Releases · video-dev/hls.jsの hls.min.js と同じである。

これで最初から字幕付きのHLSで再生できる。最初から字幕を非表示にするにはDEFAULT, AUTOSELECT, FORCEDを無指定にしておく。

映像と音声のプレイリストと字幕のプレイリストを出力する例。
ffmpeg -analyzeduration 10MB -probesize 10MB -fix_sub_duration -i input.ts -vf yadif,scale=1280:720 -c:v libx264 -c:a aac -c:s webvtt -map 0:v -map 0:a:0 -map 0:s -f hls -hls_list_size 0 720p.m3u8

vtt字幕付きのプレイリストは4.3.1時点で通常には読み込めないので入力オプションに-strict experimentalをつける。

コーデックコピーすると字幕はそのままvtt形式になりPCで見るならおそらく再生できる。
ffmpeg -strict experimental -i "https://example.com/master.m3u8" -c copy output.mkv

モバイル端末向けには字幕をmov_text形式に変更しMP4出力にする。
ffmpeg -strict experimental -i "https://example.com/master.m3u8" -c copy -c:s mov_text output.mp4

fmp4 に変更する

上のコマンド例に-hls_segment_type 1を追加する。
ffmpeg -analyzeduration 10MB -probesize 10MB -fix_sub_duration -i input.ts -vf yadif,scale=1280:720 -c:v libx264 -c:a aac -c:s webvtt -map 0:v -map 0:a:0 -map 0:s -f hls -var_stream_map "v:0,a:0,s:0,sgroup:subtitle" -master_pl_name master.m3u8 -hls_list_size 0 -hls_segment_type 1 720p.m3u8

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)