Video.js 基本播放以及字幕設置

水平居中、高度固定的播放器

• Flex實現水平垂直居中.md

content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>

以下為完成意義圖

字幕

• WebVTT Example

要讓影片加上字幕只須加上 即可，例如這樣

不過還需要注意字幕格式

原始的字幕

1
00:00:34,574 --> 00:00:40,305
片名：《終極面試》
翻譯：Blue

2
00:01:52,800 --> 00:01:54,879
這是你應得的

這個字幕是不能直接使用，必須做以下修改
WEBVTT
1
00:00:34.574 --> 00:00:40.305
片名：《終極面試》
翻譯：Blue

2
00:01:52.800 --> 00:01:54.879
這是你應得的

• 開頭加上WEBVTT
• 將時間小數點的逗號改為小數點

自訂字幕格式

• WebVTT: The Web Video Text Tracks Format

設定靠左對齊、黃字
00:00:00.000 --> 00:00:40.305 line-left align:left
片名：《終極面試》
翻譯：Blue
CSS

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