水平居中、高度固定的播放器
content=”user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width”/>
.flex{
display:flex;
align-items:center;
justify-content:center;
background-color:#000;
}
videojs(‘my-player', {
controls: true,
autoplay: false,
preload: ‘auto',
width: 960,
height: 400
});
以下为完成意义图
字幕
- 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
- 将时间小数点的逗号改为小数点
自订字幕格式
设定靠左对齐、黄色字
00:00:00.000 –> 00:00:40.305 line-left align:left
翻譯:Blue
CSS
.video-js .vjs-text-track-display .yellow{
color: yellow;
}