blocks|key|2511407|text|当您的内容在web服务器上提供服务时，曲目标签起作用。另外，不要忘记添加一个将mime类型设置为vtt文件的配置。以下是我在IIS上工作的示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2511408|<video>
+++<source+src="video.mp4"+type="video/mp4"+/>
+++<track+src="video.en.vtt"+kind="subtitles"+
+++++++++label="English+Subtitles"+srclang="en"+/>
</video>|code-block|syntax|javascript|2511409|对于IIS+Web.Config文件：|2511410|<configuration>
++++<system.webServer>
++++++<staticContent>
++++++++<remove+fileExtension=".vtt"+/>
++++++++<mimeMap+fileExtension=".vtt"+mimeType="text/vtt"+/>
++++++</staticContent>
++++</system.webServer>
</configuration>|2511411|对于Tomcat+Server+WEB-INF/web.xml文件：|2511412|<web-app>
++<mime-mapping>
++++<extension>vtt</extension>
++++<mime-type>text/vtt</mime-type>
++</mime-mapping>
</web-app>|2511413|对于Apache服务器，将.htaccess文件添加到您的web目录，并编写该行以添加字幕mime类型：|offset|length|style|BOLD|2511414|AddType+text/vtt+.vtt|2511415|entityMap^0|0|0|0|0|0|0|D|9|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|14|8|@$Q|15|R|16|S|T]]|9|@]|A|$]]|$1|U|3|V|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

Track tag is working when your content is served at a web server. Also don't forget to add a configuration that sets mime type as vtt file. Here is my example that works on IIS : 

<pre><code>&lt;video&gt;
 &lt;source src="video.mp4" type="video/mp4" /&gt;
 &lt;track src="video.en.vtt" kind="subtitles" 
 label="English Subtitles" srclang="en" /&gt;
&lt;/video&gt;
</code></pre>

For IIS Web.Config File : 

<pre><code>&lt;configuration&gt;
 &lt;system.webServer&gt;
 &lt;staticContent&gt;
 &lt;remove fileExtension=".vtt" /&gt;
 &lt;mimeMap fileExtension=".vtt" mimeType="text/vtt" /&gt;
 &lt;/staticContent&gt;
 &lt;/system.webServer&gt;
&lt;/configuration&gt;
</code></pre>

For Tomcat Server WEB-INF/web.xml file : 

<pre><code>&lt;web-app&gt;
 &lt;mime-mapping&gt;
 &lt;extension&gt;vtt&lt;/extension&gt;
 &lt;mime-type&gt;text/vtt&lt;/mime-type&gt;
 &lt;/mime-mapping&gt;
&lt;/web-app&gt;
</code></pre>

For Apache Server add .htaccess file to your web directory, and write that line to add subtitle mime type : 

<pre><code>AddType text/vtt .vtt
</code></pre>

blocks|key|4622911|text|您需要将textTracks对象的mode设置为"showing"：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4622912|var+video+=+document.querySelector('YOUR_VIDEO_SELECTOR');

video.addEventListener('load',+function()+{
++++var+tracks+=+video.textTracks[0];
++++tracks.mode+=+'showing';
});|code-block|syntax|javascript|4622913|entityMap^0|4|A|H|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

You need to set the <code>mode</code> of the <code>textTracks</code> object to "showing":

<pre><code>var video = document.querySelector('YOUR_VIDEO_SELECTOR');

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

blocks|key|6039177|text|确保您的文件另存为UTF-8，以确保特殊字符将正确显示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6039178|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Make sure that your file is saved as UTF-8 to make sure that special characters will display properly

blocks|key|2511595|text|Canavar有正确的答案，但有一件事对我有效，那就是将.vtt文件更改为.txt文件，这样您就不必担心文件服务器的配置。它在Chrome中很好地处理了隐藏字幕。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2511596|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Canavar has the correct answer but one thing that worked for me was just to change the .vtt file to a .txt file, then you don't have to worried about the file server configuration. It handled the Closed Captioning just fine for me in Chrome.

blocks|key|6039194|text|如果您使用的是chrome，那么很可能需要从终端启动它，然后输入--disable-web-security，对于linux，...更多信息请访问Disable+same+origin+policy+in+Chrome|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|6039195|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome^0|21|10|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

well, if you are using chrome, chances are that you need to start it from the terminal, and type --disable-web-security, for linux, ... more at <a href="https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome">Disable same origin policy in Chrome</a>

blocks|key|2511520|text|我对此没有答案，但得出的结论是这是一个服务器设置问题。IE上的标题在IIS上可以正常工作，但在Nginx服务器上不能正常工作，而IE作为客户端进行查看。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2511521|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I do not have an answer for this but have concluded that it is a server settings issue. The captions on IE work fine on IIS but not on Nginx server when viewing with IE as the client.

blocks|key|4622947|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4622948|<video+id="player"+controls>
++<source+src="http://video-js.zencoder.com/oceans-clip.mp4">
++<track+kind="captions"+src="_tracks/test.vtt"+default>
</video>|code-block|syntax|javascript|4622949|如果source标记不存在，大多数浏览器会忽略video标记内的其余内容。|4622950|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Try

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

If the source tag is not present most browsers ignore the rest of what is inside the video tag.

blocks|key|2511580|text|我也有同样的问题。我没有使用任何服务器，而是应用程序托管在AWS上。事实证明，您必须更改AWS中的配置。转到AWS上目录中的字幕文件。右键单击，然后选择属性，然后定义一个名为'type/vtt‘的元数据。这应该可以解决问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2511581|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I was having the same issue. I wasn't using any server, rather the application was hosted on AWS. Turns out you will have to change your configuration in the AWS. Go to your subtitles file inside your directory on AWS. Right-click then choose properties, and then define a meta-data called 'type/vtt'. This should solve the problem.

blocks|key|4623009|text|vtt文件和视频文件的源必须位于服务器内的同一文件夹中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4623010|因此，链接必须具有相同的路径。|4623011|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Your source for both vtt file and video file must be located in the same folder within the server.
Therefore, the links must have the same path.

blocks|key|6039443|text|作为@canavar的第一个回答的延续，mimetype可以直接添加到IIS中。请参阅附件中的图片。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6039444|​|6039445|📷|atomic|offset|length|6039446|6039447|6039448|6039449|6039450|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/38227f7e21fdb929ca28ea2d43e7523e.jpeg|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/6cd7c504f85513ca0b2d66c199a85943.jpeg^0|0|0|0|1|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@$G|10|H|11|1|12]]|A|$]]|$1|I|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|K|3|E|5|F|7|15|8|@]|9|@$G|16|H|17|1|18]]|A|$]]|$1|L|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T|U|-4]]|V|$5|P|Q|R|A|$S|W|U|-4]]]]

In continuation to first answer by @canavar, mimetype can be added in IIS directly. Please see attached images.
<a href="https://i.stack.imgur.com/HKnyv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HKnyv.jpg" alt="enter image description here" /></a>
<a href="https://i.stack.imgur.com/MnLex.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MnLex.jpg" alt="enter image description here" /></a>

I am trying to make the simplest html5 video player in the world:

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

Done!

Now why does the player recognize that there is captions, but doesnt show them? I have tried different video's and subtitle files now.

HTML5 track captions not showing

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我正在尝试制作世界上最简单的html5视频播放器：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ST Media Player</title> </head> <body> <video id="player" src="http://video-js.zencode

问未显示HTML5曲目标题
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未显示HTML5曲目标题EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未显示HTML5曲目标题
EN