HTML5 track captions not showing

R

11

13

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.

Rizzi answered 7/3, 2013 at 10:23 Comment(0)

P

26

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

Photoemission answered 7/3, 2013 at 10:35 Comment(4)

Where do i change the config on my web server? – Rizzi 7/3, 2013 at 10:50

@ThomasTeilmann : Is your web server IIS ? if so, you should put a web.config file to the root folder, copy-paste my config into it. – Photoemission 7/3, 2013 at 11:2

what about apache server? – Worrell 2/12, 2014 at 20:24

How to configure in Apache Server – Spermicide 21/5, 2015 at 20:16

G

4

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

Gruff answered 13/7, 2017 at 17:52 Comment(0)

F

1

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

Fluorosis answered 8/12, 2013 at 0:44 Comment(1)

And the mime type should have charset: <mimeMap fileExtension=".vtt" mimeType="text/vtt; charset=UTF-8" /> – Garofalo 17/9, 2017 at 15:29

E

1

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.

Embrocation answered 17/9, 2019 at 20:31 Comment(0)

B

1

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.

Brazee answered 17/1, 2022 at 18:26 Comment(1)

Hi Maya, Welcome to SO, Thank you for your answer but it is always better to include a sample code that describe your answer, adding why it is working and adding reference link will make your answer unique and beautiful. – Sticker 17/1, 2022 at 19:57

C

0

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

Copacetic answered 18/11, 2015 at 9:35 Comment(0)

H

0

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.

Hedvig answered 10/4, 2017 at 19:28 Comment(3)

Since you have relevant and likely helpful information but not an answer, I would suggest posting this information as a comment to the question instead of an answer. Thank you! – Sanfred 10/4, 2017 at 20:11

Apologies. Getting use to Stack Overlow – Hedvig 10/4, 2017 at 23:14

Since you now have enough reputation to comment, you may wish to add a comment to the question and delete this answer. – Stuffing 11/1, 2019 at 13:36

D

0

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.

Dessertspoon answered 3/5, 2018 at 18:22 Comment(0)

S

0

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.

Spirogyra answered 11/1, 2019 at 13:9 Comment(1)

I wish you had explained more on this. I am kind of in the same situation – Kernan 10/10, 2021 at 3:11

G

0

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

Greig answered 20/2, 2022 at 10:15 Comment(0)

S

0

Check the time code in your captions .vtt file starts with 00:00:00.000. I created captions using Davinci Resolve and my time code started at 01:00:00.000 by default. Changing the timecode solved the problem.

Strohbehn answered 2/8 at 11:28 Comment(0)

Recommended topics

Hot tags