Question

问题是在全屏模式下观看时，按钮在视频播放器上不再可见。如何在全屏/普通屏幕模式下显示视频播放器上的按钮？

$('#btnFullscreen').on('click', function() {
    var elem = document.getElementById("hwyVideo");
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    }
});

.videoContainer {
   position: relative;
}
.videoContainer > .btnCamera {
     background: url('http://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat;
     height: 128px;
     left: 22%;
     margin: -64px 0 0 -64px;
     position: fixed;
     top: 20%;
     width: 128px;
     z-index: 1;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="videoContainer">
  <video id="hwyVideo" controls="controls" style="width: 42%; height: auto">
    <source src="http://www.youtube.com/embed/XGSy3_Czz8k">
      <p>Your browser does not support the video tag.</p>
  </video>
  <div id="btnCamera" class="btnCamera"></div>

</div>

<input type="submit" id="btnFullscreen" data-role="none" name="btnPopupAddneModelOP" data-icon="check" value="Fullscreen" />

Answer 1

您应该在视频容器元素上调用requestFullscreen，例如，您可以更改

var elem = document.getElementById("hwyVideo");

到

var elem = document.getElementById("hwyVideo").parentNode;

在视频标签上放置一个按钮

1 个答案: