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

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





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
















以下为完成意义图

Video.js 基本播放以及字幕设置-1

字幕

  • 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
  • 将时间小数点的逗号改为小数点

Video.js 基本播放以及字幕设置-2

自订字幕格式

设定靠左对齐、黄色字
00:00:00.000 --> 00:00:40.305 line-left align:left
片名:《終極面試》
翻譯:Blue
CSS

.video-js .vjs-text-track-display .yellow{
color: yellow;
}
Video.js 基本播放以及字幕设置-3

评分

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注