关于html中的字幕(顺便复习一下相对路径与绝对路径)

标题:关于html5中track(字幕)元素的解释与说明

  前言:track在html5中充当的角色是字幕可以在video或者audio元素中放入炫酷的字幕来使视频更加有质量,下面开始具体介绍track的属性

  内容:

  1.

  首先在学习track元素之前就必须对video和audio元素有所了解,这里不再细讲,复习或者新学的同学可以在W3school中大体了解网址如下:   http://www.w3school.com.cn/tags/tag_video.asp 

2.位置

  track位置是有要求的,要求是video或者audio的子元素,具体点可以理解为一个永远在宿主体内的病毒,当离开宿主时,就会死亡,具体如下

<video>
<track> </track>
</video>


3.属性 (1)default属性

  没有具体的属性值,用来通知浏览器在用户没有选择使用其他字幕文件的时候可以使用这个track(字幕)元素来使用(摘抄自陆凌牛先生的html5与css3权威指南),下面是个人理解:类似于一个两平米空间的房间只能够盛一个人,default就类似于给与了这个人(track)元素的默认使用权,当浏览器有自己的track元素时这个default的元素就会被踢出,还有一点要注意的是这个房间只有这么大小,是不允许有第二个人再有default属性的,因为这样你的房子会被撑爆,程序世界也就崩塌了。

(2)src属性

src属性相信只要大家一定对其熟悉,其含义为路径,字幕文件需要一个vtt格式的文件来储存,关于vtt里面字幕的格式该如何写下一篇webvtt会讲到,对于track来说,src元素可以是相对地址也可以是绝对地址,关于相对地址与绝对地址,这里不再详细讲,请参考以下链接http://www.adminwang.com/html/35.html   对于一个有意义的track元素来说,src是必需的(上面default属性中的代码只是用来对default的解释,实际上并不是一个有意义的元素)    例 子:

<video>
<track src="1.vtt" default>
</track>
</video>

(3)srclang属性

srclang属性从字面上来看比src多了lang,这个lang指的是language,顾名思义,是用来规定字幕的语言用的,可以由两部分组成:语言—地区  具体实例如下:

<video>
<track src="1.vtt" srclang="zh-ca" default >
</track>
</video>
其中zh指的是中文,ca指的是加拿大地区即可理解为加拿大地区所用中文, 注意:srclang的属性值是不区分大小写的。 我们用的最多的是zh-hans  简体中文
<video>
<track srclang="zh-Hans">
</track>
</video>


(4)kind属性

kind属性用来指定track的类型具体有哪些类型,参考以下链接http://www.w3school.com.cn/tags/att_track_kind.aspkind的默认属性为subtitles

技巧:关于track中的名字最好取与加载的视频或者音频文件名相同的名字,因为很多浏览器的音频播放器或者视频播放器将自动寻找与音频或者视频相同的字幕文件并自动加载
注意:在同一个video与audio元素中track不允许出现两个相同的kind或者srclang或者label

结语:第一篇博客希望能坚持将所学的代码以后写在博客上面,个人会尽量将一些难懂的抽象的代码具体化,拿到现实生活中举一个具体的例子让大家好理解,以后会有个板块叫做化抽象为具体写博客果然很累,但是也确实学的细很多









猜你喜欢

转载自blog.csdn.net/rookinzhang/article/details/78985409