<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的区别
- 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目的是帮助正常观众理解对话的语言）
- 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)
参考