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.
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 :
For IIS Web.Config File :
For Tomcat Server WEB-INF/web.xml file :
For Apache Server add .htaccess file to your web directory, and write that line to add subtitle mime type :
Make sure that your file is saved as UTF-8 to make sure that special characters will display properly
Try
If the source tag is not present most browsers ignore the rest of what is inside the video tag.
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.
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.
You need to set the
mode
of thetextTracks
object to "showing":