Video.js の基本的な再生と字幕設定

高さを固定し、水平方向に中央配置したプレーヤー

• Flexは水平方向と垂直方向のセンタリングを実現します。md

コンテンツ="ユーザースケーラブル=いいえ、初期スケール=1、最大スケール=1、最小スケール=1、幅=デバイス幅"/>

以下は完成した意味マップです

字幕

• WebVTTの例

動画に字幕を追加するには、 例えば、

ただし、字幕の形式にも注意が必要です。

オリジナル字幕

1
00:00:34,574 --> 00:00:40,305
映画のタイトル: 究極のインタビュー
翻訳: 青

2
00:01:52,800 --> 00:01:54,879
あなたはそれに値する

この字幕はそのまま使用することはできません。以下の変更を加える必要があります。
ウェブVTT
1
00:00:34.574 --> 00:00:40.305
映画のタイトル: 究極のインタビュー
翻訳: 青

2
00:01:52.800 --> 00:01:54.879
あなたはそれに値する

• 先頭にWEBVTTを追加する
• 時刻の小数点のカンマを小数点に変更します

カスタム字幕フォーマット

• WebVTT: ウェブビデオテキストトラックフォーマット

左揃え、黄色のテキストに設定
00:00:00.000 --> 00:00:40.305 行左揃え align:left
映画のタイトル: 究極のインタビュー
翻訳: 青
CSS

.video-js .vjs-text-track-display .yellow{
色: 黄色;
}