Javascript HTML5背景视频大小调整小故障_Javascript_Responsive Design_Html5 Video

Javascript HTML5背景视频大小调整小故障

javascript responsive-design

Javascript HTML5背景视频大小调整小故障,javascript,responsive-design,html5-video,Javascript,Responsive Design,Html5 Video,注：这是对的后续问题我已将接受答案的代码包装在事件侦听器中，结果如下： <!DOCTYPE html> <html> <head> <style type="text/css"> body, html { width: 100%; height: 100%; margin: 0;

注：这是对的后续问题

我已将接受答案的代码包装在事件侦听器中，结果如下：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body, html {
                width: 100%;
                height: 100%;

                margin: 0;
                padding: 0;
            }

            #container { 
                position: absolute; 
                width: 100%; 
                height: 100%; 
                overflow: hidden; 
            }

            #player { 
                position: absolute; 
            }
        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

        <script type="text/javascript">
            $(window).load(function () {
                adjust = function () {
                    var $player = $('#player');
                    var $window = $(window);

                    $player[0].height = $window.height(); 

                    $player.css('left', (($window.width() - $player.width()) / 2) + "px");
                };

                adjust();

                $(window).resize(function () {
                    adjust();
                });
            });
        </script>
    </head>
    <body>
        <div id="container">
              <video id="player" autoplay loop>
                    <source src="background.mp4" type="video/mp4" />
                    <source src="background.ogv" type="video/ogg" />
              </video>
        </div>
    </body>
</html>


正文，html{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
#容器{
位置：绝对位置；
宽度：100%；
身高：100%；
溢出：隐藏；
}
#玩家{
位置：绝对位置；
}
$（窗口）。加载（函数（）{
调整=功能（）{
变量$player=$（“#player”）；
变量$window=$（window）；
$player[0]。高度=$window.height（）；
$player.css（'left'，（$window.width（）-$player.width（））/2）+“px”）；
};
调整（）；
$（窗口）。调整大小（函数（）{
调整（）；
});
});

当我垂直调整窗口的大小时，我会得到一个空的空间。

有什么办法可以解决这个问题吗？

尝试将宽度和高度设置为“自动”，并添加最小宽度/高度

编辑：无需担心。你不应该设计你的容器。相反，你的视频风格

#player { 
      min-width: 100%; 
      min-height: 100%; 
      width: auto; 
      height: auto; 
      position: absolute; 
      overflow: hidden; 
}

确保您的#容器是您希望生成视频的大小。

视口的纵横比如果始终将视频的高度设置为视口的高度，则只要视口非常宽且非常短（如上面的屏幕截图所示），左右两侧都会有未使用的空间

相反，如果始终将视频的宽度设置为视口的宽度，则只要视口非常窄且非常高（与上面的屏幕截图相反），顶部或底部都会有未使用的空间

要使视频始终完全填满视口，诀窍是在任何给定时间都知道使用宽度还是高度更好。这取决于视频的纵横比与视口的纵横比

如果视口按比例比视频宽，请使用宽度
如果视口按比例高于视频，请使用高度

jQuery

// Set this variable when the page first loads
var videoAspectRatio;

function adjust() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    var viewportAspectRatio = viewportWidth / viewportHeight;

    if (viewportAspectRatio > videoAspectRatio) {

        // Very-wide viewport, so use the width
        $player.css({width: viewportWidth + 'px', height: 'auto'});

        // Position the video as needed
        // ...
    }
    else {
        // Very-tall viewport, so use the height
        $player.css({width: 'auto', height: viewportHeight + 'px'});

        // Position the video as needed
        // ...
    }
}

$(document).ready(function(){
    // Get the aspect ratio of the video
    videoAspectRatio = $player.width() / $player.height();
    adjust();
});

$(window).resize(function(){ adjust(); });

这不是一个完整的解决方案，因为视频大小调整应该连接到父容器，我想，只是有时候连接到窗口，而且这个示例没有垂直/水平居中的代码，如果容器不等于视频大小，视频就不会精确地移动，所以为了节省纵横比，您需要将视频居中（因为视频高度/宽度将大于父级）以获得更好的视图。