分屏bug 小记

继上篇分屏完成后，发现最下面的控制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;

        }

    }