HTML5轨道字幕未显示 [英] HTML5 track captions not showing

查看:436
本文介绍了HTML5轨道字幕未显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试制作世界上最简单的html5视频播放器:

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>

完成!

现在,玩家为何能识别出字幕,却不显示字幕?我现在尝试了不同的视频和字幕文件.

Now why does the player recognize that there is captions, but doesnt show them? I have tried different video's and subtitle files now.

推荐答案

当您的内容在Web服务器上投放时,Track标记有效.同样不要忘记添加将mime类型设置为vtt文件的配置.这是我在IIS上可以使用的示例:

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>

对于IIS Web.Config文件:

For IIS Web.Config File :

<configuration>
    <system.webServer>
      <staticContent>
        <remove fileExtension=".vtt" />
        <mimeMap fileExtension=".vtt" mimeType="text/vtt" />
      </staticContent>
    </system.webServer>
</configuration>

对于Tomcat服务器的WEB-INF/web.xml文件:

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>

对于Apache服务器,将 .htaccess 文件添加到您的Web目录,并在该行中添加字幕mime类型:

For Apache Server add .htaccess file to your web directory, and write that line to add subtitle mime type :

AddType text/vtt .vtt

这篇关于HTML5轨道字幕未显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆