在視頻的右下角添加內部 div

Question

我正在使用 Nodejs、socket.io 和 WebRTC（peerjs 庫）開發視頻聊天應用程序。 在登錄頁面上，用戶輸入他/她的名字並被重定向到他的視頻流（通過 WebRTC）並可以與他的同伴聯系的頁面。 這工作正常，視頻正在 DOM 中動態添加。 每個同行加入后，我想使用 Javascript 在他/她的視頻的右下角動態顯示每個登錄用戶的名稱 append。

在我下面的 function 中，我添加了一個 static 名稱只是為了調試目的

Java腳本 Function

//Function that appends all the videos to the DOM (Working fine)
const videoGrid = document.getElementById('video-grid');

const addVideoStream = (video, stream) => {
    video.srcObject = stream
    video.addEventListener('loadedmetadata', () => {
      video.play()
    })
    videoGrid.append(video)
    //Here I create a div, add the name in it and append on top of video
    const testName = "John Doe"
    const div = document.createElement('div');
    div.classList.add('video-name');
    const html = `
    <i class="fas fa-microphone"></i>
    <span>${testName}</span>
     `
    div.innerHTML = html;
    video.appendChild(div);
}

標記

<div class="main__videos">
<div id="video-grid">
    {/* Add videos dynamically via Js */}
</div>
</div>

CSS

//CSS
//Parent Container that holds all videos
#video-grid{
    display: flex;
    width: 1090px;
    overflow-y: auto;
    flex-wrap: wrap;
    position: relative;
 }

 //Each video
 video{
    height: 250px;
    width: 350px;
    object-fit: cover;
    padding: 8px;
    position: relative;
 }
  
 //Name styles that are being added dynamically
 .video-name {
    justify-content: end;
    position:absolute;
    left: 0;
    z-index:1;
    color: red;
    background-color: orange;
}

Answer 1

我想出了一個可能的解決方案。 你錯過了很多; 在你發布的代碼中，但我假設如果你有 function 工作，他們就會正確地發布在那里。

在這里，我創建了一個用於測試目的的虛擬<div class="video"></div>元素，而不是創建一個<video>標記元素。 我還更改了 javascript 的順序，所以首先我聲明 function 以添加視頻和內部 div，然后我使用 null stream 創建虛擬視頻元素，接下來我調用 function。

在 function 中，我首先獲取videoGrid元素並按照您擁有的方式運行代碼。

我還相應地更改了 css 代碼以使用<div class="video">元素而不是<video>標簽，並更改了video-name和video元素的一些屬性。

 //Function that appends all the videos to the DOM (Working fine) const addVideoStream = (video, stream) => { const videoGrid = document.getElementById('video-grid'); video.srcObject = stream; video.addEventListener('loadedmetadata', () => { video.play(); }) videoGrid.append(video); //Here I create a div, add the name in it and append on top of video const testName = "John Doe"; const div = document.createElement('div'); div.classList.add('video-name'); const html = ` <i class="fas fa-microphone"></i> <span>${testName}</span> `; div.innerHTML = html; video.appendChild(div); } const video = document.createElement('div'); video.classList.add('video'); const html = 'A video'; video.innerHTML = html; addVideoStream(video,null);

 #video-grid { display: flex; width: 1090px; overflow-y: auto; flex-wrap: wrap; position: relative; /* Added properties */ background-color: rgba(0,0,0,0.5); color: black; }.video { height: 250px; width: 350px; object-fit: cover; padding: 8px; position: relative; /* Added properties */ border: dashed 1px black; }.video-name { /* justify-content: end; <------- Removed */ position: absolute; /* left: 0; <------- Removed */ z-index: 1; color: red; background-color: orange; /* Added properties */ bottom: 0; right: 0; width: 50%; }

 <div class="main__videos"> <div id="video-grid"> The grid </div> </div>