如何直接通过文本设置 HTML5 视频字幕？

Posted 2023-03-07

【中文标题】如何直接通过文本设置 HTML5 视频字幕？

【英文标题】：How to set HTML5 video subtitle directly by text?

【发布时间】：2015-03-18 11:39:21

【问题描述】：

例如，这是一个 video 标记，其中包含一个 track。

<video src='some_video.mp4'>
    <track id='some_subtitle' kind='subtitles'>
</video>

我不想设置track 标签的src 属性，因为我只是在页面上编辑字幕。我试过类似的东西

document.getElementById('some_subtitle').value = '1\n0.00 --> 5.00\nSubtitle';

但不起作用。谁能告诉我这样做的正确方法是什么？

【参考方案1】：

类似这样的：

video = document.getElementById('vid');
track = video.addTextTrack('captions');
track.mode = "showing";
track.addCue(new VTTCue(0, 5, 'Subtitle'));
track.addCue(new VTTCue(10, 15, 'Hi, cue!'));

等等。还有一个 removeCue 方法。

http://www.html5rocks.com/en/tutorials/track/basics/#toc-cues-js http://www.w3.org/TR/html5/embedded-content-0.html#text-track