<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)
參考