未显示WebVTT标题

Question

我正在为我录制的视频添加字幕，但是我在captions.vtt文件中创建的所有字幕都没有显示出来。我的代码出了什么问题？

websites.html
<video width="320" height="480" controls>
        <source src="IMG_1771.mp4" type="video/mp4">
            <track kind="captions" label="Video Captions" src="captions.vtt"  />
    </video>


captions.vtt
WEBVTT

Title
00:00.000 --> 00:00.300 
Good Morning

Subtitle
00:00.500 --> 00:02.000 
My name is John Doe

Subtitle 2
00:02.500 --> 00:04.000  
And today I will be giving reasons why video enhances websites

Answer 1

要单独播放字幕，您应该始终在track标记中定义default属性，以指示启用了哪个曲目，因为这里只有一首曲目，您应该将其指定为活动曲目。

此外，正如track标记的属性部分中提到的MDN，每当您向跟踪标记添加kind属性时，您也应该指示srclang，这是必要的。

所以输出应该是这样的：

<video width="320" height="480" controls>
    <source src="IMG_1771.mp4" type="video/mp4">
    <track default kind="captions" label="Video Captions" srclang="en" src="captions.vtt"/>
</video>