Question

我正在尝试使用本地HTML文件实现HTML5视频播放器以查看本地视频，我想拥有VTT字幕和字幕功能。

我目前正在使用VideoJS进行播放;但是，我的问题不是针对具体实施的。当我尝试使用VTT文件时，我收到一个跨源错误，指出无法使用这些文件。（这取决于浏览器，因为IE 10似乎播放得很好，而Firefox和Chrome会抛出错误。）

我希望有一种跨浏览器的方式来做这件事，我会对任何人找到的解决方案/解决方案感兴趣。我所知道的一个解决方案是使用Node Web Kit创建Web服务器混合包;但是，我无法使用此解决方案，因为我希望保持我的解决方案平台独立并免于安装。

Answer 1

我已经破解了一个解决方案！它只需要两个文件：

视频文件。
HTML文件，包含：
- either VTT或SRT格式的字幕。
- 用于解析嵌入的VTT文本并将其添加到视频的脚本。

从this 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以显示字幕。这是我之前的方法，仍然可以在this GitHub Gist中找到。我在VideoSub v0.9.9使用了Thomas Sturm的经过大量修改的版本。
使用MP4Box.js构建一个从视频文件中读取embedded subtitles的播放器。（尝试this demo中的“多路复用音频/视频/字幕（未分段，AVC + AAC + WebVTT）”测试视频。）
使用Subtitle Videoplayer from Chrome Web Store，或者构建您自己的Chrome应用。是的，这是一个非常具体的选择，它不是跨浏览器。
在Chrome中，您可以disable the security checks by passing a command-line flag。这样做时要小心！

Answer 2

长话短说，你几乎是SOL，除非你或者a）将VTT文件放在具有跨源头的公共服务器上，或者b）在你的项目中添加一个简单的web服务器来提供文件。

如果你想让这项工作离线而不是带有Chrome标志的猴子，选项B可能是你最好的选择。它需要安装某种类型，但是有无数种方法可以跨平台设置一个简单的Web服务器。

查看带有字幕的HTML5视频

2 个答案: