向视频元素添加动态字幕

Question

我想允许用户上传字幕文件(例如".srt"(以使用纯HTML和JS沿着mp4播放。

我已经尝试了我能想到的一切，但现在没有想法了：

1( 尝试在video元素的track子元素上设置src属性

2( 尝试在 JS 中创建新的track元素，设置src属性，并将track追加为video元素的子元素

3( 尝试使用video元素的HTMLMediaElement.addTextTrack()api，尽管TextTrackapi 似乎不支持src属性。

4(尝试了所有这些方法，包括src，srcObject(尽管我认为此属性对track元素无效(和URL.createObjectURL的所有组合。

const $ = document.querySelector.bind(document);
$('#subtitles-input').addEventListener('change', () => {
// approach 1
$('#subtitles').src = URL.createObjectURL($('#subtitles-input').files[0]);
// approach 2
let track = document.createElement('track');
track.kind = 'captions';
track.label = 'English';
track.srclang = 'en';
track.src = URL.createObjectURL($('#subtitles-input').files[0]);
track.mode = 'showing';
$('#video').appendChild(track);
});

<lablel>Subtitles: <input id="subtitles-input" type="file"></lablel>
<video id="video" src="http://techslides.com/demos/sample-videos/small.mp4" controls>
	<track id="subtitles" kind="subtitles" label="English captions" srclang="en" default>
</video>

Answer 1

显然，我的问题是使用.srt格式而不是.vtt格式。

它们几乎相同，添加WEBVTT作为第一行并将用于表示毫秒的,替换为.就足以将有效的srt文件转换为有效的vtt文件。尽管vtt似乎具有其他可选功能，例如文本格式。

就其价值而言，方法 1 和 2 同样有效。方法 3 和 4 不起作用的原因与上述原因相同：TextTrackAPI 不支持src属性srcObject不是有效的track元素属性，并且src需要URL.createObjectURL(file)。

const $ = document.querySelector.bind(document);
$('#subtitles-input').addEventListener('change', () => {
// approach 1
$('#subtitles').src = URL.createObjectURL($('#subtitles-input').files[0]);
// approach 2
let track = document.createElement('track');
track.src = URL.createObjectURL($('#subtitles-input').files[0]);
$('#video').appendChild(track);
});

<lablel>Subtitles: <input id="subtitles-input" type="file"></lablel>
<video id="video" src="http://techslides.com/demos/sample-videos/small.mp4" controls>
	<track id="subtitles" kind="subtitles" label="English captions" srclang="en" default>
</video>