我正在尝试制作世界上最简单的 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>
完毕！
现在为什么播放器识别出有字幕，但没有显示出来？我现在尝试了不同的视频和字幕文件。
当您的内容在 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
您需要将mode对象设置textTracks为“显示”：
var video = document.querySelector('YOUR_VIDEO_SELECTOR');
video.addEventListener('load', function() {
var tracks = video.textTracks[0];
tracks.mode = 'showing';
});
确保您的文件保存为 UTF-8 以确保特殊字符能够正确显示
Canavar 有正确的答案，但对我有用的一件事就是将 .vtt 文件更改为 .txt 文件，然后您不必担心文件服务器配置。它在 Chrome 中处理隐藏式字幕对我来说很好。
我对此没有答案，但得出的结论是这是服务器设置问题。使用 IE 作为客户端查看时，IE 上的字幕在 IIS 上工作正常，但在 Nginx 服务器上却不行。
vtt 文件和视频文件的源必须位于服务器内的同一文件夹中。
因此，链接必须具有相同的路径。
好吧，如果您使用的是 chrome，很可能您需要从终端启动它，然后键入 --disable-web-security, for linux, ... 更多内容请参阅禁用 Chrome 中的同源策略
尝试
<video id="player" controls>
<source src="http://video-js.zencoder.com/oceans-clip.mp4">
<track kind="captions" src="_tracks/test.vtt" default>
</video>
如果源标签不存在，大多数浏览器会忽略视频标签内的其余内容。
我遇到了同样的问题。我没有使用任何服务器，而是将应用程序托管在 AWS 上。事实证明，您将不得不更改 AWS 中的配置。转到您在 AWS 上的目录中的字幕文件。右键单击然后选择属性，然后定义一个名为“type/vtt”的元数据。这应该可以解决问题。
继续@canavar 的第一个回答，可以直接在 IIS 中添加 mimetype。请参阅所附图片。
