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();
    }   
});

现在，当视频不是全屏时，它有我自己构建的控制器，但是当它全屏显示时，我的控制器会被隐藏，而默认的html控制器会出现。我应该如何禁用它？

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();
  }
});

全屏时会自动显示HTML控件

1 个答案: