我正在尝试实现HTML5视频播放器，以使用本地HTML文件查看本地视频，并且我希望具有VTT字幕和字幕功能。
我目前正在使用VideoJS进行播放；但是，我的问题不是特定于实现的。尝试使用VTT文件时，出现跨域错误，提示无法使用这些文件。（不过，这取决于浏览器，因为Firefox和Chrome抛出错误时，IE 10似乎可以正常运行。）
我想采用一种跨浏览器的方式来执行此操作，并且我会对任何人找到的任何解决方案/解决方法感兴趣。我知道的一种解决方案是使用Node Web Kit创建Web服务器混合包。但是，我无法使用此解决方案，因为我想保持我的解决方案平台独立且免费安装。
我已经找到了解决方案！它仅需要两个文件：
从此GitHub Gist或以下获得我的解决方案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Playing a local video</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
html, body {
background: black;
color: white;
}
html, body, video {
padding: 0;
margin: 0;
}
video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<video controls>
<source src="Your local video file.mp4" type="video/mp4">
</video>
<!-- Check https://quuz.org/webvtt/ for validation. -->
<script type="text/vtt" id="subtitle" data-label="English" data-lang="en">
WEBVTT
1
00:00:02.500 --> 00:00:05.250
Instead of loading an external .vtt file,
2
00:00:05.250 --> 00:00:09.750
The workaround is to embed it inside a script tag,
3
00:00:10.001 --> 00:00:15.000
And then parse it using JavaScript
and dynamically add it as a new TextTrack.
</script>
<script>
function parse_timestamp(s) {
var match = s.match(/^(?:([0-9]{2,}):)?([0-5][0-9]):([0-5][0-9][.,][0-9]{0,3})/);
if (match == null) {
throw 'Invalid timestamp format: ' + s;
}
var hours = parseInt(match[1] || "0", 10);
var minutes = parseInt(match[2], 10);
var seconds = parseFloat(match[3].replace(',', '.'));
return seconds + 60 * minutes + 60 * 60 * hours;
}
// https://w3c.github.io/webvtt/
// https://developer.mozilla.org/en/docs/Web/API/Web_Video_Text_Tracks_Format
// https://en.wikipedia.org/wiki/WebVTT
//
// For better parsers, look at:
// https://github.com/annevk/webvtt
// https://github.com/mozilla/vtt.js
function quick_and_dirty_vtt_or_srt_parser(vtt) {
var lines = vtt.trim().replace('\r\n', '\n').split(/[\r\n]/).map(function(line) {
return line.trim();
});
var cues = [];
var start = null;
var end = null;
var payload = null;
for (var i = 0; i < lines.length; i++) {
if (lines[i].indexOf('-->') >= 0) {
var splitted = lines[i].split(/[ \t]+-->[ \t]+/);
if (splitted.length != 2) {
throw 'Error when splitting "-->": ' + lines[i];
}
// Already ignoring anything past the "end" timestamp (i.e. cue settings).
start = parse_timestamp(splitted[0]);
end = parse_timestamp(splitted[1]);
} else if (lines[i] == '') {
if (start && end) {
var cue = new VTTCue(start, end, payload);
cues.push(cue);
start = null;
end = null;
payload = null;
}
} else if(start && end) {
if (payload == null) {
payload = lines[i];
} else {
payload += '\n' + lines[i];
}
}
}
return cues;
}
function init() {
// http://www.html5rocks.com/en/tutorials/track/basics/
// https://www.iandevlin.com/blog/2015/02/javascript/dynamically-adding-text-tracks-to-html5-video
var video = document.querySelector('video');
var subtitle = document.getElementById('subtitle');
var track = video.addTextTrack('subtitles', subtitle.dataset.label, subtitle.dataset.lang);
track.mode = "showing";
quick_and_dirty_vtt_or_srt_parser(subtitle.innerHTML).map(function(cue) {
track.addCue(cue);
});
}
init();
</script>
</body>
</html>
替代方法：
使用JavaScript视频播放器动态更新DOM以显示字幕。那是我以前的方法，仍然可以在GitHub Gist中找到。我用的一个重大的修改版本VideoSub v0.9.9由托马斯·斯特姆。
使用MP4Box.js来构建一个播放器，该播放器从视频文件中读取嵌入的字幕。（请在此演示中尝试“多路音频/视频/字幕（无片段化，AVC + AAC + WebVTT）”测试视频。）
使用Chrome Web Store的字幕视频播放 器，或者构建自己的Chrome应用。是的，这是一个非常具体的选择，并且不是跨浏览器。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句