在全屏调整高度时如何保持视频播放器响应答案

【问题标题】：How can I keep video player responsive when resizing height in full screen在全屏调整高度时如何保持视频播放器响应
【发布时间】：2018-09-23 17:09:05
【问题描述】：

我在页面内有一个全屏视频播放器，只有当我拖动浏览器的角或左右边缘时它才会响应，而不是当我尝试使用浏览器的底部边缘向上调整大小时。如果我尝试向上调整大小，它只会切断视频，因为我隐藏了溢出，或者如果我没有隐藏溢出，它会显示滚动条。我希望我可以显示黑色间距，但保持播放器底部可见，以便我可以看到播放器中的工具栏。无论我如何调整浏览器大小，保持响应的最佳方式是什么？

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

【问题讨论】：

标签： jquery css html responsive-design html5-video

【解决方案1】：

应该这样做。

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

【讨论】：

谢谢。这就是我一直在寻找的。有效！