无法在全屏模式下显示自定义视频工具栏：firefox

Question

我创建了一个自定义视频工具栏，用于显示HTML视频标记的视频控件。 我已将自定义工具栏定位为以全屏模式显示视频，该模式可正确显示Chrome但不适用于Firefox

HTML

mGradient.setBounds(0, 0, 300, 300);
mGradient.setCornerRadii(new int[] {50,50, 50,50, 0,0, 0,0});

JS

<div class="wrapper-video">
                    <video id="player" data-setup="{}" class='video-js vjs-default-skin' width='635' height='432'>
                      <source src="" type="video/mp4">
                    </video>
                    <div class="playpause"></div>
                </div>
                <div class="info-video-title-bar">//Custom toolbar with video controls
                    <progress value="0" max="1000" id="lecture_progress_bar" class="time-tooltip">
                      <div class="progress-bar" id="progress-bar">
                        <span style="width: 0%;">Progress: 0%</span>
                      </div>
                    </progress>
                    <style>
                    </style>
                    <div class="audio-controls-container">
                        <span id="video-control-play" class="lecture-icon icon-WebFont-55"></span>
                        <span id="control-seek" class="lecture-icon icon-WebFont-57" onclick="mixpanel.track('Lecture Seek');"></span>
                        <span id="control-playback-rate" class="lecture-icon icon-WebFont-60">
                        </span>
                        <span class="icon-WebFont-77 full-screen">
                    </div>            
                </div>

CSS

$(document).on('click', ".full-screen", function(){
  if($(this).hasClass("icon-WebFont-77")){
    $(".video-js")[0].player.requestFullscreen();
  $(".info-video-title-bar").addClass("fixed");
  $("progress").addClass("fixed-progress");
  $(".audio-controls-container").addClass("fixed-controls");
  $(".full-screen").removeClass("icon-WebFont-77").addClass("icon-WebFont-79");
  }else if($(this).hasClass("icon-WebFont-79")){
    exitFullScreen();
  }
});