2

注意：这是Html5 视频设置为浏览器全屏的后续问题- 与 flash 电影的 noborder 相同

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

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

当我垂直调整窗口大小时，我会留出空白空间。 在此处输入图像描述

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

4

2 回答 2

2

视口的纵横比

如果你总是将视频的高度设置为视口的高度，那么任何时候视口很宽很短（如上图所示），左右都会有未使用的空间。

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

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

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

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(); });
于 2013-05-07T14:33:03.120 回答
1

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

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

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

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

于 2013-05-07T13:01:26.580 回答