Question

我想使用填充整个窗口的视频标记，无论纵横比如何都居中，并将所有其他内容下推到视频标记/容器下方。

在窗口调整大小时，视频应相应调整大小。

我尝试了各种方法以及相对和绝对定位的组合，但没有任何效果。我确实找到了一个这样做的网站;

但我还没有弄清楚他们是如何做到的。

由于

Answer 1

根据他们的网站：

  <div class="video-wrap" style="width: 1251px; height: 1111px;">
    <meta content="Fetch">
    <meta content="Fetch video">
    <meta content="http://wearefetch.com/wp-content/uploads/2013/09/shutterstock_197472794.jpg"><video autoplay="" class="slider-video" height="700" loop="" preload="auto" style="visibility: visible; width: 2010px; height: 1131px;" width="1800">
    <source src="./wp-content/uploads/2013/09/FetchFinalHeader.webm" type="video/webm">
    <source src="./wp-content/uploads/2013/09/FetchFinalHeader.mp4" type="video/mp4">
    <source src="./wp-content/uploads/2013/09/FetchFinalHeader.ogg" type="video/ogg"></video>
  </div>

其中video-wrap宽度和高度是通过javascript在窗口调整大小上计算的。

Answer 2

是的，你应该在调整窗口大小时计算宽度和高度。我可以分享以下代码段（对不起，它不是最佳代码）。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.9.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        var fullVideo = {
            init: function () {
                this.count();
                this.handlers();
            },
            count: function () {
                var parentWidth = $(window).outerWidth();
                var parentHeight = $(window).outerHeight();
                $(this.wrapClass + "," + this.videoClass).css({
                    width: parentWidth + "px",
                    height: parentHeight + "px"
                });
            },
            handlers: function () {
                window.onresize = function (even) {
                    fullVideo.count();
                };
            },
            wrapClass: ".main-wrap",
            videoClass: ".video-wrap"
        };

    </script>

    <style type="text/css">
        body {
            margin: 0;
        }

        .main-wrap {
            position: relative;
            background: rgba(0, 0, 0, 1);
        }

        .video-wrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 300px;

        }

        .other-wrap {
            height: 500px;
            background: green;
        }
    </style>
</head>

<body onload="fullVideo.init()">
<div class="main-wrap">
    <video class="video-wrap" poster="http://media.w3.org/2010/05/sintel/poster.png"
           mediagroup="myVideoGroup" preload="none">
        <source id="mp4" type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4"></source>
        <source id="webm" type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm"></source>
        <source id="ogv" type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv"></source>
        <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
</div>

<div class="other-wrap"></div>
Other content
</body>

</html>

没有条形

2 个答案: