Fatal编程技术网
  • html/
  • Html CSS：以视频为中心并在页眉和页脚之间调整大小

Html CSS：以视频为中心并在页眉和页脚之间调整大小

html css

Html CSS：以视频为中心并在页眉和页脚之间调整大小,html,css,video.js,live-streaming,Html,Css,Video.js,Live Streaming,我很难在页面中居中调整video.js的大小，我希望设置响应的大小，并且永远不要超出页眉和页脚的边界，在任何情况下，都不能超出页眉和页脚的边界 这是我的出发点，基本上我需要放一个视频，而不是黑色的方块更大是可能的，但不是exeed页眉和页脚boudaries，最好是获得相同宽度的video.js控制栏axact在页脚上。 有人能帮我找到一个好的解决方案吗？ 非常感谢 html: <!doctype html> <

我很难在页面中居中调整video.js的大小，我希望设置响应的大小，并且永远不要超出页眉和页脚的边界，在任何情况下，都不能超出页眉和页脚的边界

这是我的出发点，基本上我需要放一个视频，而不是黑色的方块更大是可能的，但不是exeed页眉和页脚boudaries，最好是获得相同宽度的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>


标题
.video js.vjs当前时间{显示：无；}
.video js.vjs分时器{显示：无；}
.video js.vjs持续时间{显示：无；}
.video js.vjs进度控制{display:none；}
.video js.vjs剩余时间{显示：无；右：自动；}
正文，html{
保证金：0；
填充：0；
背景色：白色；
}   
* {
框大小：边框框；
}       
.头{
位置：相对位置；
显示：块；
填充：8px；
浮动：左；
}
.负责人：之后{
内容：“；
显示：表格；
明确：两者皆有；
}   
.左{
宽度：75%；
背景色：#FF5A00；
}
.对{
宽度：25%；
背景色：#FFFFFF；
}
img{
垂直对齐：中间对齐；
}   
分
{
高度：50px；
宽度：50px；
背景色：黑色；
保证金：自动；
位置：绝对位置；
左：50%；
最高：50%；
左边距：-25px；
利润上限：-25px；
}
.页脚{
位置：绝对位置；
右：0；
底部：0；
左：0；
填充：1rem；
背景色：#EFEF；
文本对齐：居中；
字体系列：“标题”，回退，无衬线；
字体大小：100%；
字体大小：正常；
字母间距：1px；
}
var player=videojs（“tv-video”）；
src（{src:'video/manifest.mpd'，类型：'application/dash+xml'}）；
player.play（）；
player.on（“暂停”，函数（）{
player.one（“play”），函数（）{
src（{“type”：player.currentType（），“src”：player.currentSrc（）}）；
player.play（）；
});
});
Notes 首先，注意您的源代码有错误，特别是您的头标签。我已经在下面的代码中修复了它们，以及其他各种改进

我只保留了
标记的内容，因为这是有趣的部分，我不能使用JavaScript，因为它链接到本地资源。您可以在之后的空闲时间操纵代码，使其按照您的意愿工作，因为我无法预测video.js将如何工作

改进 
主体
现在有一个
显示：flex值以控制flexbox的电源。这使您拥有一个灵活的系统，无论屏幕大小如何，页眉和页脚都以相同的大小保持在相同的位置（顶部和底部）

页眉现在使用
标记，类似于
用于页脚的方式。Is还使用
显示：flex
避免在元素上使用
float

出于语义原因，内容有一个
标记，但我保留了你的
.cent
类名，它有一些与flex相关的CSS:
flex
以占用空间，而
align self
以指示如何在
主体的flex上下文中行为（尽管后者不是必需的——它在没有的情况下有效——但作为预防措施，它是存在的）

视频只需占用可用
宽度
和
高度的100%

正如您所想象的，如果屏幕的比例不在16:9，则无法强制屏幕以16:9的比例显示某些内容。
的默认行为是按比例缩小视频，因此，如果视频文件的比例为16:9，则它将以16:9的比例播放，但在垂直或水平方向上可能会出现黑条

代码


*{
框大小：边框框；
}
身体，
html{
保证金：0；
填充：0；
高度：100vh；
背景色：白色；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
img{
垂直对齐：中间对齐；
}
.标题{
显示器：flex；
}
.头{
填充：8px；
}
.左{
宽度：75%；
背景色：#FF5A00；
}
.对{
宽度：25%；
背景色：#FFFFFF；
}
美分{
位置：相对位置；
flex:1自动；
自我调整：伸展；
背景色：黑色；
}
.video js{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
}
.页脚{
填充：1rem；
背景色：#EFEF；
文本对齐：居中；
字体系列：“标题”，回退，无衬线；
字体大小：100%；
字号：norma