video添加字幕

字幕一般都是配置在video视频文件中的，是和视频是一体的。

但是有时候我们视频没有字幕，字幕需要后期前端加上去怎么办呢?

track标签即可解决这个问题：

track可以当video的子元素，它的作用就是给video添加字幕。

最简单的用法：

<track src="example.vtt" default>

完整的用法：

<track src="example.vtt" kind="subtitles" label="中文字幕" srclang="zh" default>

配合video使用就是：

<video id="video" src="example.mp4" type="video/mp4">
    <track src="example.vtt" default>
</video>

最重要的是要添加default属性。

kind属性就是说这个是用来干嘛的，我们使用默认的subtitles表明就是用来作为字幕的就可以了。

srclang这个属性api中说是需要的，但是我去掉了好像也没有什么影响。

label属性是需要在video上设置controls才能生效的，设置这个属性后会在视频底部操作部分出现字幕打开关闭的操作，然后label就会显示在那个位置：

 

 

 

track的使用基本上就是这些，track需要用到的文件是.vtt格式的，可以是别人弄好的，也可以是自己来写，规则是：

//文件开头下必须先声明 **WEBVTT**
WEBVTT
// 起始时间  -->  结束时间，单位为毫秒一般0.5s就够了
00:00:00.001 --> 00:00:03.000
// 对应上面的时间显示字幕，可以单独设置样式，className类似class类名 
<v className>这里这里这里，我是字幕</v>

00:00:05.001 --> 00:00:10.000
// 字幕和时间是需要换行的
这里这里这里，我是字幕

//也可以修改字幕的位置，line是上下，position是左右
00:01.600 --> 00:03.000 line:30% position:30% 

这里这里这里，我是字幕

如果想修改字幕的样式怎么办？

使用video::cue，这是专属于字幕的伪类，样式就在这里修改（.ttf文件也可以修改样式，但是我觉得没有什么必要）

video::cue){
    //整体样式
}
video::cue(v[voice=className]){
    //单行文本样式
}

关于字幕生成可以看张鑫旭大佬的这个：

https://www.zhangxinxu.com/sp/webvtt.html

 关于字幕常用的基本上就是这些啦！