Question

注意：这是Html5 video set to browser full screen - same as noborder for flash movie

的后续问题

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

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

当我将窗口垂直调整时，我会将空白空间放在一边。 enter image description here

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

Answer 1

视口的宽高比

如果您始终将视频的高度设置为视口的高度，那么只要视口非常宽且非常短（如上面的屏幕截图所示），左侧和右侧就会有未使用的空间。

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

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

如果视口比视频宽，请使用宽度。
如果视口比视频高一些，请使用高度。

<强>的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(); });

Answer 2

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

编辑：没关系。你不应该为你的#container设计样式。相反，为您的视频设置样式。

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

确保您的#container是您希望视频产生的大小。

HTML5背景视频调整大小故障

2 个答案:

视口的宽高比