问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

HTML5 曲目字幕未显示

社区维基
1
新手上路，请多包涵

我正在尝试制作世界上最简单的 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlhtml5-videoclosed-captions
阅读 442
1 个回答
得票最新
社区维基
1

当您的内容在 Web 服务器上提供时，跟踪标签才起作用。也不要忘记添加将 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 文件添加到您的 Web 目录，并写入该行以添加字幕 mime 类型：

 AddType text/vtt .vtt

原文由 Canavar 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题