Question

我有以下HTML代码：

<div id="video-container" class="container">
<video id="video-player" class="video-js vjs-default-skin" controls
 preload="auto" autoplay width="960" height="540"  crossorigin="anonymous">
  <source src="http://{{$video_server_address}}/file/{{$video_name}}" type='video/mp4' />
  <track label="English" kind="subtitle" srclang="en" src="http://{{$video_server_address}}/file/{{$vtt_name}}" default>
  <p class="vjs-no-js">This video format is not supported.</p>
</video>
</div>

此HTML，没有任何video.js内容，将在最新版本的FF，Chrome和IE中显示视频和字幕，没有任何问题。

然后我通过以下简单的javascript代码介绍video.js。

<link href="/js/video-js/video-js.css" rel="stylesheet">
<script src="/js/video-js/video.js"></script>
<script src="/js/jquery-1.11.2.min.js"></script>
<script>
$( document ).ready(function() {
  var player = videojs("video-player");
});
</script>

然后副标题消失了FF。我检查了video.js为FF和chrome创建的HTML，它们是不同的。

对于chrome，

<div id="video-container" class="container">
<div crossorigin="anonymous" autoplay="true" preload="auto" class="video-js vjs-default-skin vjs-controls-enabled vjs-has-started vjs-user-inactive vjs-paused vjs-ended" id="video-player" style="width: 960px; height: 540px;">
<video id="video-player_html5_api" class="vjs-tech" preload="auto" autoplay="" crossorigin="anonymous" src="http://127.0.0.1:20001/file/2015/06/23/074043.mp4">
  <source src="http://127.0.0.1:20001/file/2015/06/23/074043.mp4" type="video/mp4">
  <track label="English" kind="subtitle" srclang="en" src="http://127.0.0.1:20001/file/2015/06/23/074043.vtt" default=""></track>
  <p class="vjs-no-js">This video format is not supported.</p>
</video>
==========================================================
===============Ignore many irrelevant stuff here =========
==========================================================
      <div class="vjs-subtitles-button vjs-menu-button vjs-control " role="button" aria-live="polite" tabindex="0" aria-haspopup="true" aria-label="Subtitles Menu">
    <div class="vjs-control-content"><span class="vjs-control-text">Subtitles</span>
      <div class="vjs-menu">
        <ul class="vjs-menu-content">
          <li class="vjs-menu-item" role="button" aria-live="polite" tabindex="0" aria-selected="false">subtitles off</li>
          <li class="vjs-menu-item vjs-selected" role="button" aria-live="polite" tabindex="0" aria-selected="true">English</li>
        </ul>
      </div>
    </div>
  </div> 
</div></div>

对于FF，

<video id="video-player_html5_api" class="vjs-tech" preload="auto" autoplay="" crossorigin="anonymous">
  <source src="http://127.0.0.1:20001/file/2015/06/23/074043.mp4" type="video/mp4">
  <p class="vjs-no-js">This video format is not supported.</p>
</video>
<div aria-label="Subtitles Menu" aria-haspopup="true" tabindex="0" aria-live="polite" role="button" class="vjs-subtitles-button vjs-menu-button vjs-control ">
  <div class="vjs-control-content"><span class="vjs-control-text">Subtitles</span>
    <div class="vjs-menu">
      <ul class="vjs-menu-content">
        <li aria-selected="true" tabindex="0" aria-live="polite" role="button" class="vjs-menu-item vjs-selected">subtitles off</li>
        <li aria-selected="false" tabindex="0" aria-live="polite" role="button" class="vjs-menu-item">English</li>
      </ul>
    </div>
  </div>
</div>

字幕有两个主要区别，对于FF，video.js删除了默认的TRACK标签，这是可以理解的，因为对于我的测试，FF不会为任何动态生成的视频元素显示轨道字幕，所以Video.js会尝试单独处理这个问题？对我来说没问题。

第二个区别，就是字幕，你可以搜索“aria-selected”或“vjs-selected”，很明显，对于Chrome，默认选择是“English”，而对于FF，默认选择是“Subtitle Off”。

如果我在FF中手动选择英语，则会显示字幕。

问题是，如何启用video.js自动显示FF的字幕？我试图搜索video.js API，但没有找到任何。我使用了最新的video.js，我认为这是5.0。

video.js“隐藏”firefox的副标题？如何以一般化的方式展示它？

0 个答案: