Question

我想问一个关于定制视频播放器的独特创新问题。我现在拥有的是一个具有播放功能的自定义视频播放器，当单击暂停按钮时，该按钮将暂停，但是所缺少的是，我想在单击播放按钮时全屏查看，最终输出应类似于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>

Answer 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中一样控制播放器的大小，背景等。

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

全屏模式下如何全屏模式自定义视频播放器并向下滚动

2 个答案: