HTML5 track captions not showing

Question

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.

Canavar · Answer 1 · 2015-06-22T20:55:11.797

20

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

edited Jun 22 '15 at 20:55

answered Mar 07 '13 at 10:35

Canavar

46,286
17
83
120

Where do i change the config on my web server? – Thomas Teilmann Mar 07 '13 at 10:50
@ThomasTeilmann : Is your web server IIS ? if so, you should put a web.config file to the root folder, copy-paste my config into it. – Canavar Mar 07 '13 at 11:02
what about apache server? – bakriawad Dec 02 '14 at 20:24
How to configure in Apache Server – Egglabs May 21 '15 at 20:16

score 1 · Answer 2 · answered Dec 08 '13 at 00:44

1

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

answered Dec 08 '13 at 00:44

caraya

43
6

1

And the mime type should have charset: – Lars Holm Jensen Sep 17 '17 at 15:29

score 1 · Answer 3 · edited Jul 14 '17 at 08:53

1

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';
});

edited Jul 14 '17 at 08:53

tsn

790
8
19

answered Jul 13 '17 at 17:52

Spencer S.

246
1
4
7

score 1 · Answer 4 · answered Sep 17 '19 at 20:31

1

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.

answered Sep 17 '19 at 20:31

BHinkson

126
2
4

score 0 · Answer 5 · edited May 23 '17 at 12:25

0

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 Disable same origin policy in Chrome

edited May 23 '17 at 12:25

Community

1
1

answered Nov 18 '15 at 09:35

programmer44

461
1
4
11

score 0 · Answer 6 · answered Apr 10 '17 at 19:28

0

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.

answered Apr 10 '17 at 19:28

pelicanpaul

186
1
7

1

Since you have relevant and likely helpful information but not an answer, I would suggest posting this information as a comment to the question instead of an answer. Thank you! – Thomas Gerot Apr 10 '17 at 20:11
1

Apologies. Getting use to Stack Overlow – pelicanpaul Apr 10 '17 at 23:14
Since you now have enough reputation to comment, you may wish to add a comment to the question and delete this answer. – Adrian W Jan 11 '19 at 13:36

score 0 · Answer 7 · answered May 03 '18 at 18:22

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.

score 0 · Answer 8 · answered Jan 11 '19 at 13:09

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.

HTML5 track captions not showing

8 Answers8

Linked