jquery - 全屏时 HTML 控件自动出现

Question

我的 html 代码中有一个视频

    <video width="100%" class="posted_vid">
            <source src="uploaded_videos/<?php echo $Video; ?>">
    </video>                                

        <div class="video_controls">                        
                    <input type="range" id="font-1-size" value="0" class="video_range"  min="0"><br>
                    <img src="img/playicon.png" class="play_button">
                    <img src="img/pauseicon.png" class="pause_button">
                    <img src="img/volumeicon.png" class="volume_button">
                    <input type="range" min="0" max="1" step="0.1" class="volume">
                    <span class="cur_time current_min">0:</span><span class="cur_time current_seconds">00</span>
                    <span class="duration">0:00</span>  
                   <img title="Fullscreen" src="img/fullscreen.png" class="fullscreen_vid">
       </div>

$("body").on('click', '.fullscreen_vid', function(event) {
    var vid = $(this).parent().siblings('.posted_vid')[0];
    if (vid.requestFullscreen) {
      vid.requestFullscreen();
    } else if (vid.mozRequestFullScreen) {
      vid.mozRequestFullScreen();
    } else if (vid.webkitRequestFullscreen) {
      vid.webkitRequestFullscreen();
    }   
});

现在，当视频不是全屏时，它有我构建的 Controller ，但是当它进入全屏时，我的 Controller 被隐藏，取而代之的是默认的 html Controller 。我应该如何禁用它？

Answer 1

不要将视频设置为全屏。设置一个包含全屏视频和自定义控件的 DOM 节点。

<div id="container">
  <video width="100%" class="posted_vid">
    <source src="uploaded_videos/<?php echo $Video; ?>">
  </video>
  <div class="video_controls">
    <input type="range" id="font-1-size" value="0" class="video_range" min="0"><br>
    <img src="img/playicon.png" class="play_button">
    <img src="img/pauseicon.png" class="pause_button">
    <img src="img/volumeicon.png" class="volume_button">
    <input type="range" min="0" max="1" step="0.1" class="volume">
    <span class="cur_time current_min">0:</span><span class="cur_time current_seconds">00</span>
    <span class="duration">0:00</span>
    <img title="Fullscreen" src="img/fullscreen.png" class="fullscreen_vid">
  </div>
</div>

$("body").on('click', '.fullscreen_vid', function(event) {
  var vid = $('#container');  // <------ this 
  if (vid.requestFullscreen) {
    vid.requestFullscreen();
  } else if (vid.mozRequestFullScreen) {
    vid.mozRequestFullScreen();
  } else if (vid.webkitRequestFullscreen) {
    vid.webkitRequestFullscreen();
  }
});