在 HTML 5 视频标签中从 Google Drive 访问 WebVTT 字幕答案

【问题标题】：Access WebVTT subtitle from Google Drive in HTML 5 video tag在 HTML 5 视频标签中从 Google Drive 访问 WebVTT 字幕
【发布时间】：2017-08-13 12:14:19
【问题描述】：

我绝不是网络开发人员，如果我遗漏了一些显而易见的东西，请原谅我。我检查了这个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 代码。当我在计算机上使用本地文件时，字幕轨道文件工作正常，但当我使用与 .mp4 文件相同的 drv 时，它不再工作了。

<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>

【问题讨论】：

标签： javascript html google-drive-api html5-video

【解决方案1】：

This 可能是它不起作用的原因。

准备您的字幕文件虽然您可以上传任何格式的字幕格式，仅支持 SubRip (.SRT) 和 SubViewer (.SUB)。

为了提高可读性：

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

要显示说话人何时发生变化，请在新行的开头添加 >>。

您可以找到帮助您创建这些文件或聘请公司的软件为您制作。 Learn how to create a caption and transcript files.

您也可以查看此SO post 以供进一步参考。

【讨论】：

感谢您的回复，但我认为这与我的工作完全无关。基本上，我使用 HTML5 视频标签来播放视频和字幕，但我的问题是代码在本地 URL 上运行良好，但在上传到 Google Drive 后，代码仅适用于 .mp4 URL 而不是 .vtt URL。跨度>

【解决方案2】：

刚刚找到解决方案。由于未启用字幕托管服务器 CORS，该轨道将无法运行。只需将其添加到 .htaccess

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

【讨论】：