los*_*ros 5 html javascript video html5-video video.js
我正在尝试实现一个 HTML5 视频播放器，用于使用本地 HTML 文件查看本地视频，并且我希望具有 VTT 字幕和字幕功能。
我目前正在使用 VideoJS 进行播放；但是，我的问题不是特定于实现的。当我尝试使用 VTT 文件时，我收到一个跨域错误，提示无法使用这些文件。（不过，这取决于浏览器，因为 IE 10 似乎可以正常运行，而 Firefox 和 Chrome 会抛出错误。）
我想有一种跨浏览器的方式来做到这一点，我会对任何人找到的任何解决方案/解决方法感兴趣。我知道的一种解决方案是使用 Node Web Kit 来创建 web-server 混合包；但是，我无法使用此解决方案，因为我想保持我的解决方案平台独立且免安装。
我已经想出了一个解决方案！它只需要两个文件：
\n\n\n\n从GitHub Gist或下面获取我的解决方案：
\n\n<!DOCTYPE html>\n<html>\n<head>\n<meta charset="utf-8">\n<title>Playing a local video</title>\n<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />\n<style>\nhtml, body {\n background: black;\n color: white;\n}\nhtml, body, video {\n padding: 0;\n margin: 0;\n}\nvideo {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n}\n</style>\n</head>\n<body>\n\n<video controls>\n<source src="Your local video file.mp4" type="video/mp4">\n</video>\n\n<!-- Check https://quuz.org/webvtt/ for validation. -->\n<script type="text/vtt" id="subtitle" data-label="English" data-lang="en">\nWEBVTT\n\n1\n00:00:02.500 --> 00:00:05.250\nInstead of loading an external .vtt file,\n\n2\n00:00:05.250 --> 00:00:09.750\nThe workaround is to embed it inside a script tag,\n\n3\n00:00:10.001 --> 00:00:15.000\nAnd then parse it using JavaScript\nand dynamically add it as a new TextTrack.\n\n</script>\n\n<script>\nfunction parse_timestamp(s) {\n var match = s.match(/^(?:([0-9]{2,}):)?([0-5][0-9]):([0-5][0-9][.,][0-9]{0,3})/);\n if (match == null) {\n throw \'Invalid timestamp format: \' + s;\n }\n var hours = parseInt(match[1] || "0", 10);\n var minutes = parseInt(match[2], 10);\n var seconds = parseFloat(match[3].replace(\',\', \'.\'));\n return seconds + 60 * minutes + 60 * 60 * hours;\n}\n\n// https://w3c.github.io/webvtt/\n// https://developer.mozilla.org/en/docs/Web/API/Web_Video_Text_Tracks_Format\n// https://en.wikipedia.org/wiki/WebVTT\n//\n// For better parsers, look at:\n// https://github.com/annevk/webvtt\n// https://github.com/mozilla/vtt.js\nfunction quick_and_dirty_vtt_or_srt_parser(vtt) {\n var lines = vtt.trim().replace(\'\\r\\n\', \'\\n\').split(/[\\r\\n]/).map(function(line) {\n return line.trim();\n });\n var cues = [];\n var start = null;\n var end = null;\n var payload = null;\n for (var i = 0; i < lines.length; i++) {\n if (lines[i].indexOf(\'-->\') >= 0) {\n var splitted = lines[i].split(/[ \\t]+-->[ \\t]+/);\n if (splitted.length != 2) {\n throw \'Error when splitting "-->": \' + lines[i];\n }\n\n // Already ignoring anything past the "end" timestamp (i.e. cue settings).\n start = parse_timestamp(splitted[0]);\n end = parse_timestamp(splitted[1]);\n } else if (lines[i] == \'\') {\n if (start && end) {\n var cue = new VTTCue(start, end, payload);\n cues.push(cue);\n start = null;\n end = null;\n payload = null;\n }\n } else if(start && end) {\n if (payload == null) {\n payload = lines[i];\n } else {\n payload += \'\\n\' + lines[i];\n }\n }\n }\n\n return cues;\n}\n\nfunction init() {\n // http://www.html5rocks.com/en/tutorials/track/basics/\n // https://www.iandevlin.com/blog/2015/02/javascript/dynamically-adding-text-tracks-to-html5-video\n var video = document.querySelector(\'video\');\n var subtitle = document.getElementById(\'subtitle\');\n var track = video.addTextTrack(\'subtitles\', subtitle.dataset.label, subtitle.dataset.lang);\n track.mode = "showing";\n quick_and_dirty_vtt_or_srt_parser(subtitle.innerHTML).map(function(cue) {\n track.addCue(cue);\n });\n}\ninit();\n</script>\n\n</body>\n</html>\n替代方法：
\n\n使用 JavaScript 视频播放器动态更新 DOM 以显示字幕。这是我之前的方法，仍然可以在GitHub Gist中找到。我使用了Thomas Sturm的VideoSub v0.9.9的大幅修改版本。
使用MP4Box.js构建一个从视频文件中读取嵌入字幕的播放器。（尝试本演示中的\xe2\x80\x9cMultiplexed Audio/Video/Subtitle (unfragmented, AVC+AAC+WebVTT)\xe2\x80\x9d测试视频。）
使用Chrome 网上应用店中的字幕视频播放器 ，或者构建您自己的 Chrome 应用程序。是的，这是一个非常具体的替代方案，并且它不是跨浏览器的。
在 Chrome 中，您可以通过传递命令行标志来禁用安全检查。这样做时要小心！
| 归档时间： |
|
| 查看次数： |
4422 次 |
| 最近记录： |