Как мне реагировать на проигрыватель видео при изменении высоты в полноэкранном режиме? - PullRequest
Новая
       18

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

0 голосов
/ 23 сентября 2018

У меня есть видеопроигрыватель на полном экране внутри страницы, и он реагирует, только если я перетаскиваю угол или левый и правый край браузера, а не если я пытаюсь изменить размер, используя нижний край браузера вверх.Если я пытаюсь изменить размер, он просто отключает видео, так как переполнение скрыто, или показывает полосу прокрутки, если переполнение скрыто.Я надеялся, что смогу показать интервал черного, но при этом оставляя видимую нижнюю часть плеера, чтобы я мог видеть панель инструментов в плеере.Как лучше реагировать независимо от того, как я изменяю размер браузера?

<div class="video-player-page">
    <div class="row">
        <div>
            <!-- video player here -->
            <div id="video-player"></div>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 23 сентября 2018

это должно сделать. 

<script>
    $(document).ready(function () {
        var video_w = $('#video_w');
        var videoRatio = 1.77;
        var windowRatio = 1.6; //this is width to height ratio of video.
        $(window).resize(function () {
            setVideoHeight();
        });
        function setVideoHeight() {
            windowRatio = $(window).width() / $(window).height();
            video_w.addClass('resized');
            if (windowRatio < videoRatio) {
                video_w.width($(window).width());
                video_w.height(video_w.width() / videoRatio);
            }
            else {

                video_w.height($(window).height());
                video_w.width(video_w.height().videoRatio);
            }
        }
    });
</script>
<style>
    #video_w video {
        width: 100%;
    }

    #video_w.resized video {
        width: 100% !important;
        height: 100% !important;
    }

    .row_video {
        margin: 0;
    }
</style>

HTML-разметка 

<div id="video_w">
            <video controls="controls">
                <source src="big_buck_bunny.mp4" type="video/mp4" />
            </video>
        </div>
...