HTML5 track captions not showing

2019-06-17 07:45发布

站内问答 / Html5
1996 7 5

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

<!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>

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.

7条回答
何必那么认真
2楼-- · 2019-06-17 08:23

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 : 

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

For IIS Web.Config File : 

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

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

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

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

AddType text/vtt .vtt
查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
3楼-- · 2019-06-17 08:23

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

查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
4楼-- · 2019-06-17 08:26

Try

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

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

查看更多
0人赞 添加讨论(0) 举报
Evening l夕情丶
5楼-- · 2019-06-17 08:33

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.

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
6楼-- · 2019-06-17 08:40

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.

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
7楼-- · 2019-06-17 08:41

You need to set the mode of the textTracks object to "showing":

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

video.addEventListener('load', function() {
    var tracks = video.textTracks[0];
    tracks.mode = 'showing';
});
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)