Question

我正在使用WebRTC制作视频门户网站，并且当新成员加入聊天时，需要让子级div调整大小。如果一个人正在聊天，我需要他们的div为100％的高度和宽度。如果第二次加入我需要两个div为50％;第三个33％，依此类推。我怎么能做到这一点？ div元素是在js中创建的。

编辑：添加了当前代码。

videoportal.htm

<html>
    <head>
        <title>Video Portal</title>
        <script src="js/simplewebrtc.bundle.js"></script> 
        <script src="js/videoportal.js"></script>
        <style type="Text/CSS">
            @import url('css/style.css');
        </style>
    </head>
    <body>
        <div class="backbutton"><a href="javascript:window.history.back();" style="border:0px;"><img src="images/back.png" class="backimg"></a></div>
        <div id="remotes">
        </div>
        <div class="mainlocal">
            <video id="localVideo"></video>
        </div>
        <div class="logo"><a href="https://video.landrethlans.com" style="border:0px;"><img class="logoimg" src="images/logo.png"></a></div>
        <div class="controlbar">
            <a href="javascript:togglemute();" style="border:0px;"><img class="muteimg" id="muteimg" src="images/mute.png"></a>
        </div>
    </body>
</html>

的style.css

.mainremote {
    position: absolute;
    width: 100%;
    height: 100%;
    display:table   }

.backbutton {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 25px;
    left: 10px; }

.backimg {
    position: relative;
    width: 40px;
    height: 40px; }

.mainlocal {
    position: absolute;
    height:19%;
    width: 12%;
    bottom: 10px;
    right: 10px;
    z-index:100; }

.mainlocal video {
    position: relative;
    width: 100%;
    height: 100%; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px;
    border-radius: 15px; 
    overflow: hidden; }

.videoContainer {
    position: relative;
    width: 100%;
    height: 100%; 
    overflow: auto; }

.videoContainer video {
    flex: 1; 
    position: relative;
    width: 100%;
    height: 100%; }

.backbutton {
    padding-left: 10px; }

.logo {
    position: absolute;
    bottom: 10px;
    left: 20px; 
    height:50px;
    width:100px;}

.logoimg {
    position: relative;
    height: 50px;
    width: 100px;}

.controlbar {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translate(-50%, 0);
    height:30px;
    width:30px;
}

.muteimg {
    height: 30px;
    width: 30px; }

body {
    background-color: #0f0f0f;
}

videoportal.js

var room = location.search && location.search.split('?')[1];
var tggle;


function setRoom(name) {
    document.title = "Video room: " + room;
}

if (room) {
    setRoom(room);
} else {
    window.location = "url";
}

var webrtc = new SimpleWebRTC({
    localVideoEl: 'localVideo',
    remoteVideosEl: '', // empty string
    autoRequestMedia: true,
    url: 'URL'
});

// we have to wait until it's ready
webrtc.on('readyToCall', function () {
    // you can name it anything
    webrtc.joinRoom(room);
});

webrtc.on('videoAdded', function (video, peer) {
    console.log('video added', peer);
    var remotes = document.getElementById('remotes');
    if (remotes) {

        // create video container
        var container = document.createElement('div');
        container.className = 'videoContainer';
        container.id = 'container_' + webrtc.getDomId(peer);
        video.className = 'remvideo';
        container.appendChild(video);

        // suppress contextmenu
        video.oncontextmenu = function () { return false; };

        remotes.appendChild(container);
    }   
});

webrtc.on('videoRemoved', function (video, peer) {
    console.log('video removed ', peer);
    var remotes = document.getElementById('remotes');
    var el = document.getElementById(peer ? 'container_' + webrtc.getDomId(peer) : 'localScreenContainer');
    if (remotes && el) {
        remotes.removeChild(el);
    }
});

// local volume has changed
webrtc.on('volumeChange', function (volume, treshold) {
    showVolume(document.getElementById('localVolume'), volume);
});

// remote volume has changed
webrtc.on('remoteVolumeChange', function (peer, volume) {
    showVolume(document.getElementById('volume_' + peer.id), volume);
});

function togglemute(){
    if(tggle=='on'){
        document.getElementById('muteimg').src="images/mute.png";
        tggle='off';
        webrtc.unmute();
    } else {
        document.getElementById('muteimg').src="images/unmute.png";
        tggle='on';
        webrtc.mute();
    }
}

Answer 1

我认为最简单的方法是使用水平列表并根据您要放入的内容编辑此列表。

从以下代码中可以看出，添加或删除li元素时，这些元素将始终均匀分布。

＆＃13;

ul {
    display: flex;
    align-items: stretch; /* Default */
    justify-content: space-between;
    width: 100%;
    background: #cacaca;
    margin: 0;
    padding: 0;
}
li {
    text-align: center;
    display: block;
    flex: 0 1 auto; /* Default */
    list-style-type: none;
    background: #fafafa;
    width: 100%;
}

＆＃13;

<ul>
    <li>Member 1</li>
    <li>Member 2</li>
    <li>Member 3</li>
</ul>

＆＃13;

Answer 2

使用Table元素并设置其id="myTable"，然后应用Javascript代码段动态添加新行，如下所示;

var table = document.getElementById("myTable");

// Create an empty <tr> element
var row = table.insertRow(0);

// Insert new cells (<td> elements)
var cell1 = row.insertCell(0);

// set context
cell1.innerHTML = "YOUR CONTENT";

希望这可能会有所帮助。

Answer 3

在这里，您将使用jQuery进行示例。运行良好，但可以改进，例如在添加新用户之前设置旧用户的高度，并且新用户附加预设高度，而不是在没有高度关注和环路的情况下附加。

self.physicsWorld.gravity = CGVectorMake(0,0)

function addUser(){
var count = $(".container .user").length; 
//get num of users

var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6); 
//get rand color - for demonstration purposes of this demo

var height = 100/(count+1);
/*calculate height of each user after adding the new one (the new one is the +1)*/
/*also you may want to limit this, so the user divs will not be extra small*/
if(height<=10){height=10; $(".container").css("overflow-y","scroll")}

$(".container").append("<div class='user' style='background:"+newColor+"'></div>");
/*append new div*/

$(".container .user").css("height",height+"%"
);
/*loop through users div and set correct height*/
}

.container{
width:150px;
height:200px;
border:1px solid black;
position:absolute;
top:0px;
left:120px;


}
.user{width:100%; position:relative; margin:0; float:left;}

自动调整大小＆＃34; div＆＃34;当添加另一个时

3 个答案: