代码之家 › 专栏 › 技术社区 › aman

如何在全屏幕HTML5视频播放器中显示我的div面板?

html5-video css html javascript

aman · 技术社区 · 6 年前

我正在创建自己的HTML5视频播放器控制器接口。我创造了一个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面板):

我得到的结果是:

1 回复 | 直到 6 年前

Kosh 6 年前

你可以要求全屏显示 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>