Question

我正在尝试制作带有音轨标签的演示但是轨道标签不能从我的视频播放下面的代码开始工作但字幕现在显示在屏幕上

 <!DOCTYPE html>
 <html>
  <head>
   <title>track</title>
    </head>
    <body>
    <video  autoplay="true" controls="" >
    <source src="http://www.html5rocks.com/en/tutorials/track/basics/treeOfLife/video/developerStories-en.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;">
  <track src="http://www.html5rocks.com/en/tutorials/track/basics/treeOfLife/tracks/developerStories-subtitles-en.vtt" label="English subtitles" kind="subtitles" srclang="en" default=""></track>
</video>
 </body>
</html>

Answer 1

文本曲目受跨源资源共享的约束，在这种情况下，这意味着两件事：

您的x = i % dim[1] y = (i / dim[1]) % dim[2] z = (i / dim[1] / dim[2]) % dim[3] w = (i / dim[1] / dim[2] / dim[3])元素必须具有<video>属性。
必须使用正确的CORS标头提供文本跟踪源。

在这种情况下，html5rocks网站没有为字幕启用任何CORS标题，因此您无法使用它们。

Answer 2

1）确保使用.vtt字幕文件。如果没有，请使用一些在线工具进行转换。

2）使用kind =“标题”

3）使用类似软件xampp的localhost运行

Answer 3

我最近遇到了同样的问题。您必须确保

跟踪文件的扩展名应为.vtt（如先前答案中所述）
提示。请确保文件已成功加载到浏览器中。

要执行此操作，请右键单击并单击，检查元素，然后转到控制台标签。

您在此处看到消息“ 不安全尝试加载URL ... ”吗？解决这个问题。
一种实现方法是
1. 将.vtt文件保留在与index.html相同的目录中
2. 在某些本地服务器上运行文件。（您可以使用任何扩展程序，例如实时服务器作为Visual Studio代码。）
3. 这将使浏览器同时加载文件和安全性问题。

跟踪标签不起作用

3 个答案: