我正在尝试制作世界上最简单的 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>
完成!
现在为什么玩家能识别出有字幕，但不显示？我现在尝试了不同的视频和字幕文件。
最佳答案
当您的内容在网络服务器上提供时，跟踪标签才有效。也不要忘记添加将 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
关于HTML5 轨道字幕未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15268604/