Question

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

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

有人已经解决了这个问题吗？

HTML5使用带有.vtt文件的track标记（或带有jquery.srt的.srt文件）：与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无法脱机工作，您收到以下消息：＆＃34;不支持离线播放＆＃34; 。经过少量搜索后，您可以使用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/

Answer 1

将.vtt文件转换为base64
将生成的base64字符串保存在html文件中
解码base64字符串
使用已解码的字符串作为输入创建新的blob
使用新blob作为输入
将文字追踪的来源设为新网址

＆＃13;

var subtitle = "V0VCVlRUDQoNCjENCjAwOjAwOjI4Ljg5NSAtLT4g...";
subtitle = window.atob(subtitle);
var subBlob = new Blob([subtitle]);
var subURL = URL.createObjectURL(subBlob);

document.getElementById("subtitle").setAttribute("src", subURL);

＆＃13;

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

＆＃13;

Answer 2

您随时可以将base64用于src属性：

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

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

2 个答案: