如何显示带有本地字幕的本地视频（无网络服务器）答案

【问题标题】：How to display local video with local subtitles (without webserver)如何显示带有本地字幕的本地视频（无网络服务器）
【发布时间】：2015-06-11 09:02:48
【问题描述】：

我正在寻找一种跨浏览器视频解决方案，该解决方案能够使用本地 HTML 文件和本地字幕（.srt 文件）显示本地视频。我尝试过不同的播放器（VideoJS、jwPlayer、带有 jquery.srt 的 HTML5 原生等）。在线托管时一切正常，但本地托管时似乎没有一个正常工作。

很遗憾，我无法安装任何网络服务器或使用第三方扩展。

有人已经解决了吗？

HTML5 使用带有 .vtt 文件（或带有 jquery.srt 的 .srt 文件）的 track 标签：与 IE10+ 完美兼容，但不适用于 Chrome 40+（相同评论 Viewing HTML5 video with captions offline）

<video controls preload="none" width="800" height="600" poster="test.jpg">
<source src="test.mp4" type='video/mp4' />
<track kind="subtitles" src="test_EN.vtt" srclang="en" label="English"></track>
<track kind="subtitles" src="test_FR.vtt" srclang="fr" label="French"></track>
</video>

jwPlayer v6 无法离线工作，您会收到以下消息：“不支持离线播放”。经过几次搜索后，您可以使用 jwPlayer v5 .swf 文件制作视频，但是......字幕不起作用。

<script type="text/javascript" src="jwplayer.js"></script>
<div id="oplayer">Loading the player...</div>
<script type="text/javascript">
jwplayer("oplayer").setup({file:"test.mp4",  
  image:"test.jpg",width:800,height:600,top:10,left:10,autostart:false,
  tracks:[{file:"test_FR.srt",label:"FR",kind:"captions","default":true},
  {file:"test_EN.srt",label:"EN",kind:"captions","default":true}]});  
</script>

videoJS 也使用 HTML5，所以行为相同。

注意：
如果你想绕过 Chrome 的本地问题，你可以从命令行窗口使用附加参数“--allow-file-access-from-files”启动浏览器

src：http://www.chrome-allow-file-access-from-file.com/

【问题讨论】：

与其寻找不同的解决方案，也许您应该寻找修复您之前的尝试之一。你遇到了什么错误？
感谢您的回答，我已经添加了更多信息。
是否必须跨操作系统兼容？也许有一个非html的解决方案？需要播放多少个视频？
实际上视频是嵌入在一个html项目中的，所以，它不可能是一个非html的解决方案。也许我必须找到一种方法来获取潜艇并将它们放入 html 文件中。我不明白为什么 Chrome 不运行本地字幕文件（而 IE 可以！）
它是 IE 中的一个漏洞，它应该不起作用。 “嵌入在 HTML 项目中”是什么意思？ HTML 项目只是文件系统中的文件，绝对没有理由不能双击其中一个视频。

标签： javascript html

【解决方案1】：

将 .vtt 文件转换为 base64
将生成的 base64 字符串保存在您的 html 文件中
解码base64字符串
使用解码后的字符串作为输入创建一个新的 blob
使用新的 blob 作为输入创建一个新的 url
将文本轨道的来源设置为新网址

var subtitle = "V0VCVlRUDQoNCjENCjAwOjAwOjI4Ljg5NSAtLT4g...";
subtitle = window.atob(subtitle);
var subBlob = new Blob([subtitle]);
var subURL = URL.createObjectURL(subBlob);

document.getElementById("subtitle").setAttribute("src", subURL);

<video controls>
  <source type="video/mp4" src="videoFile.mp4">
  <track id="subtitle" kind="subtitles" srclang="en" label="English">
</video>

【讨论】：

在 chrome 和 firefox 中尝试过，但没有成功。我可以看到在检查器中正确设置了源属性，对 blob 的请求实际上成功了，我什至可以成功打开它，但是由于某种原因播放视频时字幕不显示（即使我记得使用视频控件启用它们:))
您是从 vtt 文件还是从 srt 文件创建 base64 字符串？字幕文件需要在转换前进行vtt格式化。
我确实让这个工作了，对不起！我以编程方式制作了 vtt 文件，但标题无效。感谢您的回答！
如果有人好奇，如果你简单地将URL.createObjectURL(subBlob)生成的url以通常的react风格传递给你的track的src属性，则此方法也适用于react：<track src={subUrl} />跨度>

【解决方案2】：

您始终可以将base64 用于src 属性：

<track  kind="subtitles" src="data:image/png;base64, V0VCVlRUCgogICAgICAxCiAgICAgIDAwOjAwOjAyLjUwMCAtLT4gMDA6MDA6MDUuMjUwCiAgICAgIEluc3RlYWQgb2YgbG9hZGluZyBhbiBleHRlcm5hbCAudnR0IGZpbGUsCiAgICAgIAogICAgICAyCiAgICAgIDAwOjAwOjA1LjI1MCAtLT4gMDA6MDA6MDkuNzUwCiAgICAgIFRoZSB3b3JrYXJvdW5kIGlzIHRvIGVtYmVkIGl0IGluc2lkZSBhIHNjcmlwdCB0YWcsCiAgICAgIAogICAgICAzCiAgICAgIDAwOjAwOjEwLjAwMSAtLT4gMDA6MDA6MTUuMDAwCiAgICAgIEFuZCB0aGVuIHBhcnNlIGl0IHVzaW5nIEphdmFTY3JpcHQKICAgICAgYW5kIGR5bmFtaWNhbGx5IGFkZCBpdCBhcyBhIG5ldyBUZXh0VHJhY2su" label="English">

【讨论】：

【解决方案3】：

您可以使用任何静态 Web 服务器（static-server - npm、http.server - python）来提供本地文件，track 将自动拾取 srt/vtt 文件，因为它们在 HTML src 中链接。
例如：python3 -m http.server 8000 将触发静态文件网络服务器并访问 http://localhost:8000/ 以访问 index.html，就像从网络服务器提供服务一样。

对于我们不想更改 HTML 源代码并且不想传递额外参数“--allow-file-access-from-files”的情况，这可能是一个快速有效的解决方案。

【讨论】：