track元素的介绍与使用
坑军之王
225
track元素可引入Web VTT文件，为视频添加字幕。在<vedio>标签中，如果使用了<source>元素，则<track>元素应该在<source>元素之后，如下方代码：
<body>
<h1>使用track添加字幕</h1>
<video id=”video” controls>
<source src=”movie.mp4”>
<track id=”track” src=”subtitle.vtt” kind=”subtitle” default>
</video>
</body>
如下针对track元素进行简单的属性说明
|
属性 |
说明 |
|
default |
默认轨道。通知浏览器在用户没有使用其他字幕文件时使用track元素指定的字幕文件 |
|
kind |
文本轨道的文本类型。可选值包含subtitles、captions、descriptions、chapters、metadata，默认为subtitles |
|
lable |
用户可读的标题 |
|
src |
指定字幕文件 |
|
srclang |
轨道文本语言，即字幕的语言 |
而有关vtt字幕文件，其主要以固定的格式写成一个又一个字幕信息，让浏览器内核进行识别，从而为支持track元素的浏览器中的视频添加字幕，主要格式如下：
WEB VTTFILE/*此处指定这个文件是VTT文件*/
00:00:09.960 --> 00:00:12.600/*视频的时间*/
这个就是 /*对应时间的字幕*/
00:00:12.640 --> 00:00:14.440
字幕文件的
00:00:14.480 --> 00:00:16.640
编写样式
对于字幕文件的样式控制，可以使用伪类选择器：cue进行样式控制，其控制的属性如下：
浏览器支持情况见封面