注释

Question

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

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

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

注释

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

我只保留<body>标记的内容，因为这是有趣的部分，我无法使用您的JavaScript，因为它链接到本地资源。您可以随意操作代码，使其按照您的意愿工作，因为我无法预测video.js的工作方式。

的改进

body现在具有display: flex;值，可以利用flexbox的强大功能。这使您可以拥有一个灵活的系统，无论屏幕大小如何，页眉和页脚都保持相同的位置（顶部和底部），无论屏幕尺寸如何。

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

由于语义原因，内容有<main>标记，但我保留了.cent类名，其中包含一些与flex相关的CSS：flex占用空间，{{1指示如何在align-self的flex上下文中表现（尽管后者不是必需的 - 它可以在没有 - 的情况下使用，它可以作为预防措施）。

该视频只占用了body和width的100％。

你可以想象，如果不是这个比例，你不能强制屏幕在16：9中显示某些东西。 height的默认行为是按比例缩小视频，因此如果您有16：9比例的视频文件，它将以16：9播放，但在垂直或水平方向上可能会出现黑条

代码

＆＃13;

<video>

＆＃13;

* {
  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;
}

＆＃13;

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

1 个答案:

注释

的改进

代码