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

 關於字幕常用的基本上就是這些啦！