Html5-Video标签以及字幕subtitles和captions的区别

<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	指定是否是默认字幕。如果每个都不指定，将不会自动显示字幕.（chrome浏览器不支持）

 

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

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

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

SRT字幕文件，application/x-subrip或者text/plain （注意chrome浏览器不支持srt文件）

 

asp.net web.config设置

 

<system.webServer>
<staticContent>
<remove fileExtension=".vtt" />
<mimeMap fileExtension=".vtt" mimeType="text/vtt" />
</staticContent>
</system.webServer>

 

subtitles和captions的区别

1. Captions are intended for deaf and hard-of-hearing audiences. The assumed audience for subtitling is hearing people who do not understand the language of dialogue.（Captions 目的在于听力障碍的观众，subtitles目的是帮助正常观众理解对话的语言）
2. Captions are usually in the same language as the audio. Subtitles are usually a translation.（Captions 语言和对话通常是同一种，Subtitles通常是对话语言翻译）

插件mediaelementJS: https://github.com/johndyer/mediaelement  (支持srt和vtt格式字幕，且kind=subtitles,不支持captions)

参考

http://joeclark.org/access/resources/understanding.html

https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video