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.
Answer
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