WebVTT 字幕未显示

Question

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

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 属性以指示启用了哪条轨道因为您在这里只有一个轨道，所以您应该将其指示为活动一.

此外，正如 MDN 在 track 标签的属性部分中提到的，每当您将 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>

WebVTT 字幕未显示

WebVTT captions not showing

html

caption

closed-captions

webvtt