【发布时间】：2018-02-21 18:53:26
【问题描述】：
我在页面中居中和调整 video.js 大小时遇到困难，我想设置响应式大小并且永远不会超出页眉和页脚的边界，无论如何，在它们内部。
这是我的起点，基本上我需要放一个视频，而不是更大的黑色方块是可能的，但不要执行页眉和页脚边界，最好是在页脚上获取 video.js 控制栏相同的宽度。 有没有人可以帮我找到一个好的解决方案？ 非常感谢！
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>
【问题讨论】：
-
要播放的视频是 16:9
-
你的目标是拥有一个全屏（我的意思是非滚动）网页，以便页眉始终位于顶部，页脚始终位于底部，视频占据其余部分空间？ （另外，题外话，但是：如果我可以问，那是什么字体？）
-
是的！在页脚上方有播放器控件，并且从不滚动条
-
@chriskirknielsen 是用 flash 绘制的，我从仿生系统字体和 TDR 设计师共和国的东西中汲取灵感
标签： html css video.js live-streaming