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.

回答1:

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

回答2:

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

回答3:

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

回答4:

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

回答5:

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.

回答6:

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.

回答7:

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.

回答8:

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.

来源：https://stackoverflow.com/questions/15268604/html5-track-captions-not-showing

标签

html

html5-video

closed-captions