Как перейти в полноэкранный режим пользовательского видеоплеера и прокрутить вниз при включенном полноэкранном режиме - PullRequest
Новая
       2

Как перейти в полноэкранный режим пользовательского видеоплеера и прокрутить вниз при включенном полноэкранном режиме

0 голосов
/ 22 апреля 2019

Я хотел бы задать уникальный инновационный вопрос относительно пользовательского видеоплеера. Сейчас у меня есть пользовательский видеоплеер, в котором есть воспроизведение, и при нажатии кнопки паузы кнопка приостанавливается, но чего не хватает, так это того, что я хочу просматривать полноэкранный режим, когда нажимаю кнопку воспроизведения, и конечный результат должен выглядеть следующим образом: Видео YouTube в полноэкранном режиме.

Пользовательский видеоплеер:

My Custom Video Player

См. Разницу в YouTube Video Player в полноэкранном режиме.

YouTube full screen video player

Код пользовательского видеоплеера: 

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

Ответы [ 2 ]

0 голосов
/ 23 апреля 2019

Попробуйте обновить панель управления, чтобы включить в 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) - это элемент, который был отправлен в полноэкранном режиме, что означает, что выТеперь вы можете контролировать размер плеера, фона и т. д., как если бы вы делали это на странице

0 голосов
/ 22 апреля 2019

пожалуйста, попробуйте этот код: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...