Html5-Video标签和字幕

Posted 2020-06-19 分而治之

<video id="mainvideo"   src="video.mp4" type="video/mp4"controls autoplay loop> 
<track src="en_track.vtt" srclang="en" label="English" kind="caption" default> 
<track src="cn_track.vtt" srclang="zh-cn" label="简体中文" kind="caption"> 
</video>

 

or

<video width="640" height="480" controls>  
  <source src="video.mp4" type="video/mp4" />  
  <source src="video.webm" type="video/webm" />  
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" />    
</video>  

　　

track标签的属性主要有4个，如下表：

 

属性	描述
kind	定义字幕内容类型，只能是这五种之一: subtitles, captions, descriptions, chapters, metadata.
src	字幕文件的URL地址
srclang	字幕文件的语言类型，标识信息的作用，播放器不使用这个属性。
label	字幕标签，每个字幕元素必需设置一个唯一不重复的标签，切换字幕时显示的名称。
default	指定是否是默认字幕。如果每个都不指定，将不会自动显示字幕.

 

关于属性的一些说明：
• 如果没有指定类型，默认为字幕（subtitles）。
• 如果类型是字幕（subtitles），需要指定srclang。
• 不能有两个相同类型（king）的轨道有同一个标签（label）

WebVTT字幕文件的MIME类型约定是"text/vtt"，需要在IIS或者Apache等Web服务器中配置

TTML字幕文件的MIME类型约定为application/ttml+xml