CSS：视频在页眉和页脚之间居中并调整大小

Question

我在页面中居中和调整大小时遇到困难 video.js，我想设置响应大小并且永远不要超过页眉和页脚的边界，无论如何，在它们之内。

这是我的起点，基本上我需要放一个视频而不是黑色方块更大是可能的，但不执行页眉和页脚边界，最好是获得 video.js 控制栏 axact在相同宽度的页脚上。有没有人可以帮我找到一个好的解决方案？非常感谢！

html:

                <!doctype html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>title</title>
            <link href="//vjs.zencdn.net/6.6.3/video-js.min.css" rel="stylesheet">
            <script src="//vjs.zencdn.net/6.6.3/video.min.js"></script>
            <script src="http://reference.dashif.org/dash.js/nightly/dist/dash.all.min.js"></script>
<script src="https://github.com/videojs/videojs-contrib-dash/releases/download/v2.9.1/videojs-dash.min.js"></script>

                <style type="text/css">

           .video-js .vjs-current-time { display: none; }
           .video-js .vjs-time-divider { display: none; }
           .video-js .vjs-duration { display: none; }
           .video-js .vjs-progress-control { display: none; }
           .video-js .vjs-remaining-time { display: none; right: auto;} 

                 body,html{
                    margin:0;
                    padding: 0;
                    background-color: white;
                }   

                * {
                    box-sizing: border-box;
                }       

                .head {
                     position: relative;
                    display: block;
                    padding: 8px;
                    float: left;
                }
                .head:after {
                    content: "";
                    display: table;
                    clear: both;
                }   
                .left {
                width: 75%;
                background-color: #FF5A00;
                }

                .right {
                    width: 25%;
                    background-color: #FFFFFF;
                }

                    img {
                    vertical-align: middle;
                }   

                .cent
                {

                    height:50px;
                    width:50px;
                    background-color:black;
                    margin:auto;
                    position:absolute;
                    left:50%;
                    top:50%;
                    margin-left:-25px;
                    margin-top:-25px;
                }

                    .footer {
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  padding: 1rem;
                  background-color: #efefef;
                  text-align: center;
                        font-family: 'titles', Fallback, sans-serif;
                    font-size: 100%;
                    font-weight: normal;
                    letter-spacing: 1px;
                }
                    </style>
                </head>

                <body>
                    <div header="head">
                  <div class="head left">
                <img src="logos.png" alt="logo" height="20">
                  </div>
                <div class="head right">
                <img src="logos.png" alt="logo" height="20">
                  </div></header>
                <div class="cent">
        <video id=tv-video class="video-js vjs-fluid vjs-default-skin vjs-show-big-play-button-on-pause vjs-big-play-centered" controls autoplay preload="auto"></video>
          <script>
          var player = videojs('tv-video');
          player.src({ src: 'video/manifest.mpd', type: 'application/dash+xml'});
          player.play();
              player.on("pause", function () {
                player.one("play", function () {
                  player.src({"type":player.currentType(), "src":player.currentSrc()});
                  player.play();
                });
              });
        </script>
        </div>
                <footer class="footer"><img src="firma.png" alt="logo" height="20"></footer>

                </body>
                </html>

Answer 1

备注

首先，请注意您的源代码有错误，尤其是您的 header 标记。我已经在下面的代码中修复了它们，以及其他各种改进。

我只保留了 <body> 标签的内容，因为这是有趣的部分，我不能使用你的 JavaScript，因为它链接到本地资源。之后您可以随意修改代码，使其按您希望的方式工作，因为我无法预测 video.js 将如何工作。

改进

body 现在有一个 display: flex; 值来利用 flexbox 的力量。这允许您拥有一个灵活的系统，无论屏幕尺寸如何，header 和页脚都以相同的大小保持在相同的位置（顶部和底部）。

header 现在使用 <header> 标签，类似于 <footer> 用于页脚的方式。也使用 display: flex; 来避免在元素上使用 float。

由于语义原因，内容有一个 <main> 标签，但我保留了你的 .cent 类名，其中有一些 flex-related CSS: flex 到使用 space 和 align-self 来指示如何在 body 的 flex 上下文中表现（尽管后者不是必需的 - 它在没有 - 的情况下工作，它是作为预防措施存在的） .

简单地说，该视频占用了 100% 的 width 和 height 可用空间。

如您所想，您不能强制屏幕以 16:9 显示某些内容，如果它不符合该比例。 <video> 的默认行为是按比例缩小视频，因此如果您有一个 16:9 比例的视频文件，它将以 16:9 播放，但可能会出现黑条垂直或水平边。

代码

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: white;
}

body {
  display: flex;
  flex-direction: column;
}

img {
  vertical-align: middle;
}

.header {
  display: flex;
}

.head {
  padding: 8px;
}

.left {
  width: 75%;
  background-color: #FF5A00;
}

.right {
  width: 25%;
  background-color: #FFFFFF;
}

.cent {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  background-color: black;
}

.video-js {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.footer {
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
  font-family: 'titles', Fallback, sans-serif;
  font-size: 100%;
  font-weight: normal;
  letter-spacing: 1px;
}

<!-- Content of the <body> tag -->
<header class="header">
  <div class="head left">
    <img src="logos.png" alt="logo" height="20">
  </div>
  <div class="head right">
    <img src="logos.png" alt="logo" height="20">
  </div>
</header>

<main class="cent">
  <video id="tv-video" class="video-js vjs-fluid vjs-default-skin vjs-show-big-play-button-on-pause vjs-big-play-centered" controls autoplay preload="auto"></video>
</main>

<footer class="footer">
  <img src="firma.png" alt="logo" height="20">
</footer>

CSS：视频在页眉和页脚之间居中并调整大小

CSS: video centered and resized between header and footer

html

css

live-streaming

video.js

备注

改进

代码