video.js "hides" subtitle for firefox? How to show it with a generalized way?

1.1k views Asked by At

I have the following html code:

<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>

This HTML, without any video.js stuff, will display both videos and subtitles in latest version of FF, chrome and IE without problem.

I then introduce video.js in by the following simple javascript code.

<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>

Then the subtitle is gone for FF. I inspect the video.js created HTML for both FF and chrome, they are different.

For 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>

And for 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>

There are two major differences for subtitles, for FF, video.js removed default TRACK tag, this is understandable, because for my testing, FF will not display track subtitle for any dynamically generated video element, so Video.js will try to deal with this by itself? It is ok to me.

The second difference, is for subtitle, you can search for "aria-selected" or "vjs-selected", it is very clear that, for Chrome, the default selection is "English", and for FF, the default selection is "Subtitle Off".

If I manually select English in FF, the subtitle does show.

The problem is then, how can I enable video.js to automatically display the subtitle for FF? I tried to search for video.js API but didn't find any. I used the latest video.js which is 5.0 I think.

0

There are 0 answers