如何在全屏 HTML5 视频播放器中显示我的 div 面板？答案

【问题标题】：How to show my div panel in full screen HTML5 video player?如何在全屏 HTML5 视频播放器中显示我的 div 面板？
【发布时间】：2018-07-09 02:08:36
【问题描述】：

我正在创建自己的 HTML5 视频播放器控制器界面。我创建了一个 div 并将其着色为蓝色并将其塑造为一个块。它能够跟随视频播放器的大小和窗口的大小。但是当视频播放器处于全屏模式时，它不会显示。请帮助我以全屏模式显示 div controls。我的代码如下。

请注意，FULL SCREEN 按钮在堆栈溢出时不起作用。但它适用于我的网站。

The outcome I Get: 的屏幕截图在播放器的顶部和底部包含额外的黑色空间。视频还包含视频/播放器左右的白色空间。

我的代码：

#video_player {
    width: 100%;
    height: 100%;
}
 
/*
THIS CAUSES THE FULL SCREEN BUTTON TO HIDE
#video_player 
{
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}
*/

#controls {
    width: 100%;
    height: 3%;
    opacity: 0.9;
    position: absolute;;
    bottom: 0;
    z-index: 100px;
    background-color:#55b2ff;
}

#video_player_box {
    position: relative;
    width: 100%;
    height: 75%;
}

<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
</head>
<body>
    <div id="video_player_box">
        <video video-player controls id="video_player" src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4"></video>
        <div id="controls">
        </div>
    </div><p>
    <button id="full_screen">FULL SCREEN</button>
    <script>
        var video_player = document.querySelector('#video_player_box');
        var button = document.getElementById("full_screen");
        button.addEventListener('click', function () {
            if(video_player.requestFullScreen){
                video_player.requestFullScreen();
            } else if(video_player.webkitRequestFullScreen){
                video_player.webkitRequestFullScreen();
            } else if(video_player.mozRequestFullScreen){
                video_player.mozRequestFullScreen();
            }
        });
    </script>
</body>
</html>

屏幕截图：

我希望视频和播放器如何覆盖屏幕（使用 div 面板）：

我得到的结果：

【问题讨论】：

"请注意，全屏按钮在堆栈溢出时不起作用"。如果不能复制它，我们不可能知道问题是什么。请确保您提供了minimal, complete, and verifiable example。
我无法解决堆栈溢出时全屏不工作的问题。我只是希望有人使用在线shell并使用我的代码来查看

标签： javascript html css html5-video

【解决方案1】：

您可以在 video_player_box 容器上请求全屏。
所以替换var video_player = document.querySelector('[video-player]');
var video_player = document.querySelector('#video_player_box');
并更新您的 css（请参阅下面的 sn-p）：

#video_player {
    width: 100%;
    height: 100%;
}

#controls {
    width: 100%;
    height: 6.5%;
    opacity: 0.9;
    position: absolute;;
    bottom: 0;
    z-index: 100;
    background-color:#55b2ff;
}

#video_player_box {
    position: relative;
    width: 100%;
    height: 75%;
}


#video_player_box:-moz-full-screen {height:100%}
#video_player_box:-webkit-full-screen {height:100%}
#video_player_box:-ms-fullscreen {height:100%}
#video_player_box:fullscreen {height:100%}

<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
</head>
<body>
    <div id="video_player_box">
        <video video-player controls id="video_player" src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4"></video>
        <div id="controls">
            <!--CONTROLLERS WILL BE HERE-->
        </div>
    </div>
    <p><button id="full_screen">FULL SCREEN</button>
    <script>
        var video_player = document.querySelector('#video_player_box');
        var button = document.getElementById("full_screen");
        button.addEventListener('click', function () {
            if(video_player.requestFullScreen){
	            video_player.requestFullScreen();
            } else if(video_player.webkitRequestFullScreen){
	            video_player.webkitRequestFullScreen();
            } else if(video_player.mozRequestFullScreen){
	            video_player.mozRequestFullScreen();
            }
        });
    </script>
</body>
</html>

【讨论】：

感谢您的解决方案。但在全屏模式下，视频播放器不会填满整个屏幕。
是的。它会填满屏幕吗？
当然可以。你也可以试试#video_player {position:absolute; top:0; bottom:0; right:0; left:0;}，而不是你现在的。
现在播放器填满屏幕并隐藏全屏按钮
好吧，我在 Chrome 和 FF 中对其进行了测试，并且发布的答案工作正常。你甚至可以放弃我之前的评论。您能否确保您仔细复制粘贴代码？