💭
Cloudflare Stream Caption 機能を試す
今までの記事でCloudflare Streamを試してきました。 今日は字幕を付けるCaption機能を使っていきます。CaptionはVTTファイルを使って行います。
VTTファイルとは
Video Text Tracks (VTT)は動画に字幕を付ける業界標準のフォーマットです。以下のような形式で時間と表示させる字幕を記載していきます。
WEBVTT
00:00:00.500 --> 00:00:02.000
test
00:00:02.500 --> 00:00:04.300
test
このファイル形式は業界標準ですので、様々なツールがサポートしています。
さっそくやってみる
過去の記事で作成した結婚式上の動画に字幕をかぶせていきます。
Captionsタブをクリックします。
日本語(Japanese)を選び以下のファイルをアップロードします。
WEBVTT
00:00:00.500 --> 00:00:02.000
今日は結婚式です。
00:00:02.500 --> 00:00:04.300
幸せになってくださいね。
これは動画開始後0.5秒経過時点から2秒経過まで今日は結婚式です。を表示させ、2.5秒経過時点から幸せになってくださいね。を4.3秒まで表示させます。
準備はこれだけで完了です。
ブラウザで動画を見てみます。
動画Playerの右下歯車マークで日本語が選べます。動画を再生すると無事字幕が表示されます。
字幕再生をデフォルトオンにする方法
この状態ではデフォルトでCaptionはオフになっています。動画呼び出し時のURLパラメータで字幕をデフォルトオンにすることが可能です。
https:/77a78a73c850ba9e8300e3f69468307c/iframe?defaultTextTrack=ja
defaultTextTrack=jaの部分がそれにあたります。ユーザーが自分の動作でPlayerから字幕をオフにできる点に注意です。それ止めるためには、動画にあらかじめ字幕を埋め込む必要があります。
あえてjaと指定している通り複数言語の字幕を同時に設定することが可能です。対応している言語は以下の通りです。
Language Code Language
zh Mandarin Chinese
hi Hindi
es Spanish
en English
ar Arabic
pt Portuguese
bn Bengali
ru Russian
ja Japanese
de German
pa Panjabi
jv Javanese
ko Korean
vi Vietnamese
fr French
ur Urdu
it Italian
tr Turkish
fa Persian
pl Polish
uk Ukrainian
my Burmese
th Thai
複数言語で字幕を設定すると以下のように選択肢が増えます。
Discussion