'HTML5 track captions not showing

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.

Solution 1:^[1]

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

Solution 2:^[2]

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

Solution 3:^[3]

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

Solution 4:^[4]

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.

Solution 5:^[5]

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

Solution 6:^[6]

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.

Solution 7:^[7]

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.

Solution 8:^[8]

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.

Solution 9:^[9]

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.

Solution 10:^[10]

In continuation to first answer by @canavar, mimetype can be added in IIS directly. Please see attached images.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	tsn
Solution 3	caraya
Solution 4	BHinkson
Solution 5	Community
Solution 6	pelicanpaul
Solution 7	Erinly
Solution 8	Vivek Singh
Solution 9	Maya Ismaiel
Solution 10	Sandeep Thakur

'HTML5 track captions not showing

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]