Video.js 基本播放以及字幕设置
source link: https://uzbox.com/tech/video-js-jibenbofangyijizimushezhi.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
水平居中、高度固定的播放器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
<title></title>
<link rel="stylesheet" href="/Component_Front/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="video-js-7.2.4/video-js.min.css"/>
<style>
.flex{
display:flex;
align-items:center;
justify-content:center;
background-color:#000;
}
</style>
</head>
<body><div class="container">
<div class="row">
<div class="col-xs-12">
<div class="flex" style="height: 400px;">
<video id="my-player" class="video-js vjs-big-play-centered" >
<source src="EP01.mp4" type='video/mp4'>
</video>
</div>
</div>
</div>
</div>
<script src="video-js-7.2.4/video.min.js"></script>
<script>
videojs('my-player', {
controls: true,
autoplay: false,
preload: 'auto',
width: 960,
height: 400
});
</script>
</body>
</html>
以下为完成意义图
- WebVTT Example
要让影片加上字幕只须加上<track> 即可，例如这样
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="flex" style="height: 400px;">
<video id="my-player" class="video-js vjs-big-play-centered" >
<source src="EP01.mp4" type='video/mp4'>
<track kind='captions' src="EP01.srt" label="Chinese" default />
</video>
</div>
</div>
</div>
</div>
不过还需要注意字幕格式
原始的字幕
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
<c.yellow.bg_blue>片名：《終極面試》</c>
翻譯：Blue
CSS
.video-js .vjs-text-track-display .yellow{
color: yellow;
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK