Question

我绝不是网络开发者，所以请原谅我，如果我错过了一些明显的东西。我已经检查了这个question，我发现它可以正常使用.mp4文件，但WebVTT文件（.vtt）不可用。 I think the player recognized the subtile as the player bar show "CC" button but in the video, subtitle was not displayed.我做错了什么？任何帮助都会得到满足。

这是我的JS代码。当我在我的计算机上使用本地文件时，字幕轨道文件工作正常，但是当我使用drv时，就像.mp4文件一样，它不再工作了。

<script>
  function myFunction1() {
   document.getElementById("myVideo").src= "https://www-drv.com/~email/gd/Testing/NG!-01.mp4";
   document.getElementById("mySubtitle").src= "https://www-drv.com/~email/gd/Testing/01.vtt";
   document.querySelector('video').load();
  }
</script>

这是我的视频代码

<video width="1280" height="720" controls="controls" preload="none">
  <source id="myVideo" src="https://www-drv.com/~email/gd/Testing/NG!-01.mp4" type="video/mp4">
  <track id="mySubtitle" src="https://www-drv.com/~email/gd/Testing/01.vtt" kind="subtitles" srclang="id" label="English" default>
</video>

Answer 1

This可能是它无效的原因。

准备字幕文件尽管您可以上传字幕文件   格式，仅支持 SubRip（ .SRT）和SubViewer（ .SUB）。

为了提高可读性：


为了帮助有听力障碍的人，请将[音乐]或[笑]等描述放在方括号内。

要显示发言人更改的时间，请添加＆gt;＆gt;在新线的开头。


您可以找到帮助您创建这些文件或雇用公司的软件   为你做这些。 Learn how to create a caption and transcript files

您也可以查看此SO post以获取进一步的参考。

Answer 2

刚刚找到解决方案。该轨道将无法正常工作，因为字幕托管服务器未启用CORS。只需将其添加到.htaccess

即可

<IfModule mod_headers.c>
     Header set Access-Control-Allow-Origin "*"
</IfModule>

从HTML 5视频标记中的Google云端硬盘访问WebVTT字幕

2 个答案: