HTML5轨迹字幕未显示

Question

HTML5轨迹字幕未显示

13

我想制作世界上最简单的HTML5视频播放器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ST Media Player</title>
    </head>
    <body>
        <video id="player" src="http://video-js.zencoder.com/oceans-clip.mp4" controls>
            <track kind="captions" src="_tracks/test.vtt" default>
        </video>
    </body>
</html>

完成了！

那么为什么播放器能够识别字幕，但是却不显示它们呢？我现在已经尝试了不同的视频和字幕文件。

- Teilmann

10个回答

4

您需要将textTracks对象的mode设置为“showing”：

var video = document.querySelector('YOUR_VIDEO_SELECTOR');

video.addEventListener('load', function() {
    var tracks = video.textTracks[0];
    tracks.mode = 'showing';
});

- Spencer S.

1

您的vtt文件和视频文件必须位于服务器中的同一文件夹中。

因此，链接必须具有相同的路径。

- Maya Ismaiel

嗨，玛雅，欢迎来到SO。感谢您的回答，但最好包含一个描述您答案的“示例代码”，加上“为什么它有效”和“添加参考链接”将使您的答案独特而美丽。 - vaku

1

请确保您的文件保存为UTF-8，以确保特殊字符能够正确显示。

- caraya

1

而且MIME类型应该具有字符集： - Lars Holm Jensen

1

Canavar给出了正确的答案，但对我有效的一种方法是将.vtt文件更改为.txt文件，然后您就不必担心文件服务器配置。在Chrome中，它可以很好地处理闭路字幕。

- BHinkson

0

尝试

<video id="player" controls>
  <source src="http://video-js.zencoder.com/oceans-clip.mp4">
  <track kind="captions" src="_tracks/test.vtt" default>
</video>

如果源标签不存在，大多数浏览器将忽略视频标签内的其余内容。

- Erinly

0

我对此没有答案，但得出结论是服务器设置问题。在使用IE作为客户端查看时，IE上的字幕在IIS上运行良好，但在Nginx服务器上却不行。

- pelicanpaul

1

由于您提供了相关且有用的信息，但并非答案，我建议您将此信息作为评论发布在问题下方，而不是作为答案。谢谢！ - 657784512

1

抱歉，还在适应使用 Stack Overflow。 - pelicanpaul

由于您现在已经有足够的声望来评论，您可以选择在问题下添加一条评论并删除此答案。 - Adrian W

0

我曾经遇到过同样的问题。我没有使用任何服务器，而是将应用程序托管在AWS上。结果发现你需要更改AWS中的配置。进入AWS上您目录内的字幕文件。右键单击，然后选择属性，然后定义一个名为“type/vtt”的元数据。这应该可以解决问题。

- Vivek Singh

我希望你能多解释一些。我有点处于同样的情况。 - Luqman

0

如果你正在使用Chrome浏览器，那么很可能需要从终端启动它，并输入--disable-web-security命令。对于Linux系统，...更多信息请参见在Chrome中禁用同源策略。

- programmer44

0

继@canavar的第一个答案之后，mimetype可以直接在IIS中添加。请参见附加的图片。

- Sandeep Thakur

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Canavar · Accepted Answer

当您的内容在Web服务器上提供时，Track标签才能正常工作。还要记得添加设置MIME类型为vtt文件的配置。以下是我在IIS上运行的示例：

<video>
   <source src="video.mp4" type="video/mp4" />
   <track src="video.en.vtt" kind="subtitles" 
         label="English Subtitles" srclang="en" />
</video>

对于 IIS Web.Config 文件：

<configuration>
    <system.webServer>
      <staticContent>
        <remove fileExtension=".vtt" />
        <mimeMap fileExtension=".vtt" mimeType="text/vtt" />
      </staticContent>
    </system.webServer>
</configuration>

针对Tomcat服务器的WEB-INF/web.xml文件：

<web-app>
  <mime-mapping>
    <extension>vtt</extension>
    <mime-type>text/vtt</mime-type>
  </mime-mapping>
</web-app>

对于Apache服务器，请将.htaccess文件添加到您的网站目录，并写下以下行以添加字幕MIME类型：

AddType text/vtt .vtt