如何全屏模式自定义视频播放器并在全屏打开时向下滚动答案

【问题标题】：How to full screen mode custom video player and scroll down when full screen is on如何全屏模式自定义视频播放器并在全屏打开时向下滚动
【发布时间】：2019-04-22 06:27:32
【问题描述】：

我想问一个关于自定义视频播放器的独特创新问题。我现在拥有的是一个自定义视频播放器，它有一个播放，当点击暂停按钮时，按钮会暂停，但缺少的是我想在点击播放按钮时查看全屏，最终输出应该看起来像YouTube 视频全屏模式。

自定义视频播放器：

查看 YouTube 视频播放器在全屏模式下的区别。

自定义视频播放器代码：

<!DOCTYPE html>
    <html>
    <head>
        <style type="text/css">
            div#video_player_box{ width:100%; background:#000; }
            div#video_controls_bar{ background: #333; padding:10px; }
        </style>

        <script>
            function playPause(btn, vid){
                var vid = document.getElementById(vid);
                if (vid.paused) {
                    vid.play();
                    btn.innerHTML = "Pause";
                }else{
                    vid.pause();
                    btn.innerHTML = "Play";
                }
            }
        </script>
    </head>
    <body>
        <div id="video_player_box">
            <video id="my_video" controls="controls" width="100%" height="320">
                <source src="videoplayback.mp4">
            </video>

            <div id="video_controls_bar">
                <button id="playpausebtn" onClick="playPause(this,'my_video')">Pause</button>
            </div>
        </div>
    </body>
    </html>

【问题讨论】：

您是否尝试过扩展容器 div，其中包含您想要全屏显示的播放器和其他项目 - document.getElementById("myDiv").requestFullscreen();
@Offbeatmammal 还没有先生，先生，您可以参考我的代码吗？我是这个谜题的新手。感谢您的回答，谢谢先生。我对这个新的有麻烦。我不太确定将那行代码放在哪里。
尝试更新您的控制栏以在 div 上包含全屏请求：<div id="video_controls_bar"> <button id="playpausebtn" onClick="playPause(this,'my_video')">Pause</button> <button id="fs" onclick="document.getElementById('video_player_box').requestFullscreen();">FS</button> </div>
@Offbeatmammal - 它确实有效！但是如何更改视频播放器的宽度和高度？谢谢
@Offbeatmammal 也是，为什么下面的页面是黑色的？点击FS就不能和同一个页面一样吗？

标签： javascript css html video

【解决方案1】：

尝试更新您的控制栏以在 div 上包含全屏请求：

<div id="video_controls_bar">
    <button id="playpausebtn" onClick="playPause(this,'my_video')">Pause</button>
    <button id="fs" onclick="document.getElementById('video_player_box').requestFullscreen();">Full Screen</button>
</div>

由于父 div (video_player_box) 是全屏发送的元素，这意味着您现在可以像在页面上的 div 中一样控制播放器的大小、背景等

【讨论】：

【解决方案2】：

请试试这个代码：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {margin:0;}
            div#video_player_box{ width:100%; background:#000; }
            div#video_controls_bar{ background: #333; padding:10px; }
        </style>

        <script>
            function playPause(btn, vid){
                var vid = document.getElementById(vid);
                if (vid.paused) {
                    vid.play();
                    btn.innerHTML = "Pause";
                }else{
                    vid.pause();
                    btn.innerHTML = "Play";
                }
            }
        </script>
    </head>
    <body>
        <div id="video_player_box">
            <video id="my_video" controls="controls" width="100%" height="100%">
                <source src="videoplayback.mp4">
            </video>

            <div id="video_controls_bar">
                <button id="playpausebtn" onClick="playPause(this,'my_video')">Pause</button>
            </div>
        </div>
    </body>
</html>

【讨论】：