本篇主要是讲前端实现视频字幕的效果
Web视频文本跟踪格式 (
WebVTT) 是一种使用元素显示定时文本轨道（如字幕或标题）的格式。WebVTT文件的主要用途是将文本叠加添加到。
<video id="videoEL" controls autoplay crossorigin="anonymous" src="./gg.mp4" width="500">
<track default src="./zh.vtt" label="中文字幕">
<track default src="./en.vtt" label="英文字幕">
</video>
track是video的子标签 , 引用了一个vtt类型的文件, label属性是切换字幕时的标题。
vtt文件
举例：
WEBVTT
00:00.400 --> 00:00.900 line:38% position:35%
干什么呢
00:01.600 --> 00:01.600 line:40% position:35%
就你个小不点
vtt文件的书写规范，最主要的三个核心要素：时间，样式，位置。
时间
字幕出现的时间，【开始】->【结束】
00:00.400 --> 00:00.900 // 400ms-900ms的时候出现
时间有两种格式 ,
mm:ss.ttthh:mm:ss.ttt
样式
有两种定义样式的方式
- 外挂样式,写在css文件或者style节点里面
下面的代码就是定义默认字幕的样式
video::cue {
background-color: transparent;
color: yellow;
font-size: 20px;
text-shadow: peachpuff 0 1px;
}
- 内联样式，就是写在vtt文件里面的样式
下面就是写在vtt文件里面默认字幕样式，注意其STYLE开头
STYLE
::cue {
background-color: transparent;
color: yellow;
font-size: 20px;
text-shadow: peachpuff 0 1px;
}
多种字幕样式
上面的样式都只提到了默认样式，演示效果上有两种颜色的字幕，还可以给字幕自定义样式。
vtt文件:
00:00.200 --> 00:00.800 line:58% position:80%
<c.mn>大块头</c.mn>
位置
就是字幕在哪出现
字幕可以水平展示，也可以垂直展示。
line
指定文本垂直显示的位置。如果设置垂直，则行指定文本水平显示的位置。
position
指定文本将水平显示的位置。如果设置为垂直，则位置指定文本将垂直显示的位置。
看一段代码分析：
这条字幕在距顶部38%，左边35% 的位置出现。
00:00.400 --> 00:00.900 line:38% position:35% 干什么呢
最后附上完整的演示视频的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
video::cue {
background-color: transparent;
color: yellow;
font-size: 20px;
text-shadow: peachpuff 0 1px;
}
video::cue(c.mn) {
color: #FFF;
text-shadow: peachpuff 0 1px;
}
</style>
</head>
<body>
<video id="videoEL" controls autoplay crossorigin="anonymous" src="./dongman.mp4" width="600">
<track default src="./zh.vtt" label="中文字幕">
<track default src="./en.vtt" label="英文字幕">
</video>
</body>
</html>
zh.vtt:
WEBVTT
00:00.400 --> 00:00.900 line:38% position:35%
干什么呢
00:01.600 --> 00:01.600 line:40% position:35%
就你个小不点
00:01.600 --> 00:03.000 line:30% position:30%
说啥
00:04.000 --> 00:04.800 line:34% position:30%
真嚣张
00:05.000 --> 00:06.000 line:34% position:30%
找教训
00:00.200 --> 00:00.800 line:58% position:80%
<c.mn>大块头</c.mn>
00:01.500 --> 00:02.000 line:58% position:80%
<c.mn>干架</c.mn>
00:02.500 --> 00:03.000 line:58% position:80%
<c.mn>来啊</c.mn>
00:04.000 --> 00:04.800 line:58% position:80%
<c.mn>来啊</c.mn>
00:04.000 --> 00:04.800 line:58% position:80%
<c.mn>来啊</c.mn>
00:05.000 --> 00:06.000 line:58% position:35%
🔨🔨
00:07.201 --> 00:07.400 line:58% position:35%
💔
00:07.401 --> 00:07.800 line:58% position:35%
💔
