时间戳

首页 > 解决方案 > 为什么视频网格在 html 中移动聊天网格

javascript - 为什么视频网格在 html 中移动聊天网格

问题描述

嘿，伙计们，我正在用 html 实现一个基于视频通话的应用程序。到目前为止，我已经完成了所有情况，但主要问题是当新成员加入通话时，窗口会随着聊天一起移动，我需要的是聊天应该是僵硬的不应移动视频窗口应向左滚动。

此外，如何在此处将视频设置为 3 3 或 4 4 或 8*8 类型的网格。

#video-grid {
  display: flex;
  justify-content: center;
  padding: 5 px;
}

video {
  height: 300 px;
  width: 400 px;
  object-fit: cover;
}

.main__chat_window {
  flex-grow: 1;
  overflow-y: scroll;
}

.main__videos {
  flex-grow: 1;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10 px;
}

.main__left {
  flex: 0.8;
  display: flex;
  flex-direction: column;
}

.main__right {
  flex: 0.2
}
<div class="main">
  <div class="main__left">
    <div class="main__videos">
      <div id="video-grid">
      </div>
    </div>
    <div class="main__controls">
      <div class="main__controls__block">
        <div onclick="muteUnmute()" class="main__controls__button main__mute_button">
          <i class="fas fa-microphone"></i>
          <span>Mute</span>
        </div>
        <div onclick="playStop()" class="main__controls__button main__video_button">
          <i class="fas fa-video"></i>
          <span>Stop Video</span>
        </div>
      </div>
      <div class="main__controls__block">
        <div onclick="security()" class="main__controls__button main__security">
          <i class="fas fa-shield-alt"></i>
          <span>Security</span>
        </div>
        <div onclick="share()" class="main__controls__button main__share">
          <i class="fas fa-share"></i>
          <span>Share</span>
        </div>
        <div class="main__controls__button">
          <i class="fas fa-comment-alt"></i>
          <span>Chat</span>
        </div>
      </div>
      <div onclick="leaveMeeting()" class="main__controls__block main__leave_meeting">
        <div class="main__controls__button">
          <span class="leave_meeting">Leave Meeting</span>
        </div>
      </div>



    </div>
  </div>
  <div class="main__right">
    <div class="main__header">
      <h6>Chat</h6>
    </div>
    <div class="main__chat_window">
      <ul class="messages">

      </ul>

    </div>
    <div class="main__message_container">
      <input id="chat_message" type="text" placeholder="Type message here...">
    </div>

  </div>


</div>

标签： javascripthtmlcssnode.jsreactjs

解决方案

如果您需要，解决方案就在这里：

*{
  margin: 0;
}
html, body{
  height: 100%;
  width: 100%;
}
.main{
  display: flex;
  flex-direction: row;
  height: 100%;
}
#video-grid {
  display: flex;
  justify-content: center;
  padding: 5 px;
}

video {
  height: 300 px;
  width: 400 px;
  object-fit: cover;
}

.main__chat_window {
  flex-grow: 1;
  overflow-y: auto;
}

.main__videos {
  flex-grow: 1;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10 px;
}

.main__left {
  flex: 0.8;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: auto;
}
.main__chat_window{
  flex-grow: 1;
}

.main__right {
  flex: 0.2;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
}
<div class="main">
  <div class="main__left">
    <div class="main__videos">
      <div id="video-grid">
      </div>
    </div>
    <div class="main__controls">
      <div class="main__controls__block">
        <div onclick="muteUnmute()" class="main__controls__button main__mute_button">
          <i class="fas fa-microphone"></i>
          <span>Mute</span>
        </div>
        <div onclick="playStop()" class="main__controls__button main__video_button">
          <i class="fas fa-video"></i>
          <span>Stop Video</span>
        </div>
      </div>
      <div class="main__controls__block">
        <div onclick="security()" class="main__controls__button main__security">
          <i class="fas fa-shield-alt"></i>
          <span>Security</span>
        </div>
        <div onclick="share()" class="main__controls__button main__share">
          <i class="fas fa-share"></i>
          <span>Share</span>
        </div>
        <div class="main__controls__button">
          <i class="fas fa-comment-alt"></i>
          <span>Chat</span>
        </div>
      </div>
      <div onclick="leaveMeeting()" class="main__controls__block main__leave_meeting">
        <div class="main__controls__button">
          <span class="leave_meeting">Leave Meeting</span>
        </div>
      </div>



    </div>
  </div>
  <div class="main__right">
    <div class="main__header">
      <h6>Chat</h6>
    </div>
    <div class="main__chat_window">
      <ul class="messages">

      </ul>

    </div>
    <div class="main__message_container">
      <input id="chat_message" type="text" placeholder="Type message here...">
    </div>

  </div>


</div>

推荐阅读