继上篇分屏完成后，发现最下面的控制div受浮动影响，移动到了最上面，这是不合理的，所以对其设置了清除浮动 overflow： hidden 属性，但是这里产生了新的问题，点击4分屏后，页面出现了滚动条。这里可以看出设置的宽高是不合理的，所以要进行精确设置。
首先我们需要设置容纳video标签的div的大小。在页面加载完成后，通过加载完成事件来设置，加粗部分，为设置容纳video标签的div.后面的代码为设置单video标签的宽高，由于设置了margin：2px.所以需要宽高都要减去4个像素。
mounted() {
this.$nextTick(() => {
//设置
let player = document.getElementsByClassName(‘player’);
console.log(player);
player[0].width = window.innerWidth – 400;
player[0].height = window.innerHeight – 80 – 60;
let vi = document.getElementById(1);
vi.width = window.innerWidth – 400 – 4;
vi.height = window.innerHeight – 80 – 60 – 4;
vi.margin = 0;
})
},
再者设置video标签的浮动即可，这里有一个bug,最开始我设置的是包含video标签的div浮动，这里会产生div 与 video之间会有间隔，所以只能设置video标签的浮动
overflow: hidden;
background-color: aquamarine;
.video-content-1 {
//float: left; //不能设置div的浮动，会在video之间产生间隔
display:inline;
video {
float: left;
// width: 1520px – 4px;
// height: 849px – 60px;
margin: 2px;
padding: 0;
object-fit: fill;
border-width: 2px;
border-color: aqua;
box-sizing: border-box;
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/51795.html
