HTML5 track captions not showing

closed-captions, html, html5-video

Solution

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

Problem

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.

Original source

Related problems