本篇主要是講前端實(shí)現(xiàn)視頻字幕的效果
Web視頻文本跟蹤格式 (
WebVTT) 是一種使用元素顯示定時(shí)文本軌道（如字幕或標(biāo)題）的格式。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的子標(biāo)簽 , 引用了一個(gè)vtt類(lèi)型的文件, label屬性是切換字幕時(shí)的標(biāo)題。
vtt文件
舉例：
WEBVTT
00:00.400 --> 00:00.900 line:38% position:35%
干什么呢
00:01.600 --> 00:01.600 line:40% position:35%
就你個(gè)小不點(diǎn)
vtt文件的書(shū)寫(xiě)規(guī)范，最主要的三個(gè)核心要素：時(shí)間，樣式，位置。
時(shí)間
字幕出現(xiàn)的時(shí)間，【開(kāi)始】->【結(jié)束】
00:00.400 --> 00:00.900 // 400ms-900ms的時(shí)候出現(xiàn)
時(shí)間有兩種格式 ,
mm:ss.ttthh:mm:ss.ttt
樣式
有兩種定義樣式的方式
- 外掛樣式,寫(xiě)在css文件或者style節(jié)點(diǎn)里面
下面的代碼就是定義默認(rèn)字幕的樣式
video::cue {
background-color: transparent;
color: yellow;
font-size: 20px;
text-shadow: peachpuff 0 1px;
}
- 內(nèi)聯(lián)樣式，就是寫(xiě)在vtt文件里面的樣式
下面就是寫(xiě)在vtt文件里面默認(rèn)字幕樣式，注意其STYLE開(kāi)頭
STYLE
::cue {
background-color: transparent;
color: yellow;
font-size: 20px;
text-shadow: peachpuff 0 1px;
}
多種字幕樣式
上面的樣式都只提到了默認(rèn)樣式，演示效果上有兩種顏色的字幕，還可以給字幕自定義樣式。
vtt文件:
00:00.200 --> 00:00.800 line:58% position:80%
<c.mn>大塊頭</c.mn>
位置
就是字幕在哪出現(xiàn)
字幕可以水平展示，也可以垂直展示。
line
指定文本垂直顯示的位置。如果設(shè)置垂直，則行指定文本水平顯示的位置。
position
指定文本將水平顯示的位置。如果設(shè)置為垂直，則位置指定文本將垂直顯示的位置。
看一段代碼分析：
這條字幕在距頂部38%，左邊35% 的位置出現(xiàn)。
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%
就你個(gè)小不點(diǎn)
00:01.600 --> 00:03.000 line:30% position:30%
說(shuō)啥
00:04.000 --> 00:04.800 line:34% position:30%
真囂張
00:05.000 --> 00:06.000 line:34% position:30%
找教訓(xùn)
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>來(lái)啊</c.mn>
00:04.000 --> 00:04.800 line:58% position:80%
<c.mn>來(lái)啊</c.mn>
00:04.000 --> 00:04.800 line:58% position:80%
<c.mn>來(lái)啊</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%
??
