Question

我正在创建自己的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面板）：

我得到的结果：

Answer 1

您可以在video_player_box容器上请求全屏显示。
因此，替换var video_player = document.querySelector('[video-player]');
与var video_player = document.querySelector('#video_player_box');
并更新您的CSS（请参见下面的代码段）：

#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>

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

1 个答案: