vue 页面动态分屏

最初方案：使用弹性盒子布局

<template>
    <div class="player">
        <div class="rtc">
            <div :class="'video-content-' + videoCount" v-for="n in videoCount">
                <video :id="n" controls autoplay @click="selectVideo(n)" ref="myVideo">
                </video>
            </div>
        </div>
        <div class="control">
            <button type="button" @click="start()">播放</button>
            <button @click="stop()">停止</button>
            <button @click="setVideoPlayer(1,setVideoStyle)">1分屏</button>
            <button @click="setVideoPlayer(4,setVideoStyle)">4分屏</button>
            <button @click="setVideoPlayer(9,setVideoStyle)">9分屏</button>
        </div>
    </div>
</template>


<script>
.rtc
{
     display: flex;
     flex-wrap: wrap;
    justify-content: space-around;
     align-items: center;
     align-content: space-between;

     width: 100%;
     height: calc(100% - 60px);
     margin: 0;
     padding: 0;

     .video-content-1 {
         position: relative;
         width:100%;
          height: 100%;
         margin: 0px;
     }

     .video-content-4 {
         position: relative;
         width: calc(50% - 2px);
         height: calc(50% - 2px);
         margin: 0px;
     }

     .video-content-9 {
         position: relative;
         width: calc(100% / 3 - 2px);
         height: calc(100% / 3 - 2px);
         margin: 0px;
     }

     video {

         object-fit: fill;
         width: 100%;
         height: 100%;
         margin: 0px;
         padding: 0px;
         border-width: 4px;
         border-style: solid;
         color: black;
         box-sizing: border-box;


     }
}
</script>

这种方式，看起来很不错，但是当我在播放rtc视频时，播放器的大小改变了，尝试了很多方法，都不能解决问题，除非给定固定宽高可以解决问题。那就是百分比并不适用。

方案二：采用固定大小，标签使用浮动布局（测试代码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>

.rtc{

    width: 1000px;
    height: 600px;
background-color: pink;
        margin: 0 auto;
        padding: 0;
}

video 
{
    float: left;
    width: calc(1000px / 2 - 4px);
    height: 200px;
    padding: 0;
    margin: 2px;
    background-color: green;
    object-fit: fill;
}

button{
    width: 60px;
    height: 30px;
}

</style>

</head>
<body>
    
    <div class="rtc">
        <div>
            <video id="1" src=""  controls autoplay ></video>
            <video id="2" src="" controls autoplay ></video>
            <video id="3" src=""  controls autoplay></video>
            <video id="4" src=""  controls autoplay></video>
        </div>

        <div>
            <button onclick="play()">开始</button>
        </div>
    </div>  

</body>
</html>

<script>
    function play()
    {
        console.log("ssss");

        let ss = document.getElementById(1);
        console.log(ss);
        ss.src = 'D:/CloudMusic/MV/bhl.mp4';
    }


</script>

播放视频时，大小没有变化，方案可行，但是有一个问题，就是不能适用与不同分辨率的场景。这里必须动态设置固定大小的视频标签，只能在js中设置。

最终方案：在js中动态设置video的大小，以下为js的关键代码

 setVideoPlayer(count, callBack) {
                this.videoCount = count;
                this.$nextTick( ()=>
                {callBack(count);})
               // 
            },


            setVideoStyle(count)
            {
                console.log(count);
                //设置视频标签大小
                let windowWidth = window.innerWidth;
                let windowHeight = window.innerHeight;

                let vi = document.getElementsByClassName('video-content-' + count);

                let baseWidth = windowWidth - 400;
                let baseHeight = windowHeight - 80 - 60;
                console.log("ssss");
              switch(count)
              {
                    case 1:
                        let vi = document.getElementById(1);
                        console.log(vi);
                        vi.width = baseWidth - 4;
                        vi.height = baseHeight -20;
                    break;
                    case 4:

                        for(let i = 1; i <= count; i++)          
                            {
                                let vi = document.getElementById(i);
                                console.log(vi);
                                vi.width = baseWidth / 2 - 8;
                                vi.height = baseHeight / 2;
                            }

                        break;
                        case 9:
                            for(let i = 1; i <= count; i++)          
                            {
                                let vi = document.getElementById(i);
                                console.log(vi);
                                vi.width = baseWidth / 3 - 10;
                                vi.height = baseHeight / 3;
                            }


                            break;
              }
            },



css

.rtc {
    

    .video-content-1{
        float: left;
        video{
            // width: 1520px - 4px;
            // height: 849px - 60px;
            margin: 2px;
            padding: 0;
            object-fit: fill;
            border-width: 2px;
            box-sizing: border-box;
        }
    }

    .video-content-4{
        float: left;
        video{
            // width: (1520px / 2 - 8px);
            // height: (849px - 60px) / 2;
            margin: 2px;
            padding: 0;
            object-fit: fill;
            border-width: 2px;
             box-sizing: border-box;
        }
    }
    .video-content-9{
        float: left;
        video{
            // width: ((1520px / 3) - 10px);
            // height: (849px - 60px) / 3 ;
            margin: 2px;
            padding: 0;
            object-fit: fill;
            border-width: 2px;
            box-sizing: border-box;
        }
    }

}

css中的宽高设置都被注释掉了，这里还要注意标红部分，这里表示等待dom加载完成后执行，否则dom还没加载完成，视频标签还没创建出来，就去设置大小，就会出错

setVideoPlayer(count, callBack) {
this.videoCount = count;
this.$nextTick( ()=>
{callBack(count);})
//
},

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/51796.html