Geek Answers Handbook

HTML5 Header Captions Not Displaying

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 know that there are signatures, but does not show them? I tried different videos and subtitles now.

+7
source share
8 answers

The track tag works when your content is served on a web server. Also remember to add a configuration that sets the mime type as a 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 the 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:

 <web-app> <mime-mapping> <extension>vtt</extension> <mime-type>text/vtt</mime-type> </mime-mapping> </web-app>

For the Apache server, add the .htaccess file to your web directory and write this line to add the type of subtitle captions:

 AddType text/vtt .vtt
+18
source

Make sure your file is saved as UTF-8 to make sure that special characters are displayed correctly

+1
source

You need to set the mode of the textTracks object to "show":

 var video = document.querySelector('YOUR_VIDEO_SELECTOR'); video.addEventListener('load', function() { var tracks = video.textTracks[0]; tracks.mode = 'showing'; });
+1
source

Well, if you use chrome, there is a chance that you need to start it from the terminal, and enter --disable-web-security, for linux, ... more at Disable the same origin policy in Chrome

0
source

I have no answer for this, but came to the conclusion that this is a problem with the server settings. IE signatures work fine in IIS, but not on the Nginx server when viewed with IE as a client.

0
source

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 missing, most browsers ignore everything else that is inside the video tag.

0
source

I had the same problem. I did not use any server; rather, the application was hosted on AWS. Turns out you'll have to change your configuration in AWS. Browse to the subtitle file in your AWS directory. Right-click, then select properties, and then define metadata named 'type / vtt'. This should solve the problem.

0
source

Canavar has the correct answer, but the one thing that worked for me was to just change the .vtt file to a .txt file, then you don't have to worry about the file server configuration. It did great with closed captioning for me in Chrome.

0
source

More articles:


All Articles