[英]Adding inner divs on bottom -right corner of a video
I'm working on a video chat application using Nodejs, socket.io and WebRTC (peerjs library).我正在使用 Nodejs、socket.io 和 WebRTC(peerjs 库)开发视频聊天应用程序。 On the login page, a user inserts his/her name and is redirect to the page whereby his video streams (via WebRTC) and can connect with his peers.在登录页面上,用户输入他/她的名字并被重定向到他的视频流(通过 WebRTC)并可以与他的同伴联系的页面。 This is working fine and videos are being added dynamically in the DOM.这工作正常,视频正在 DOM 中动态添加。 Once each peer joins, I would like to append the name of each logged in user at the bottom-right corner of his/her video dynamically using Javascript.每个同行加入后,我想使用 Javascript 在他/她的视频的右下角动态显示每个登录用户的名称 append。
In my function below, I have added a static name just for debugging purposes在我下面的 function 中,我添加了一个 static 名称只是为了调试目的
JavaScrpt Function 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);
}
Markup标记
<div class="main__videos">
<div id="video-grid">
{/* Add videos dynamically via Js */}
</div>
</div>
CSS 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;
}
I have came up with a possible solution.我想出了一个可能的解决方案。 You had a lot of missing ;
你错过了很多;
in the code you posted, but i assume that if you had the function working they are properly posted there.在你发布的代码中,但我假设如果你有 function 工作,他们就会正确地发布在那里。
In here I create a dummy <div class="video"></div>
element for testing purposes, instead of creating a <video>
tag element.在这里,我创建了一个用于测试目的的虚拟<div class="video"></div>
元素,而不是创建一个<video>
标记元素。 Also I changed the order of the javascript so first I declare the function to add the video and the inner div, then i create the dummy video element with a null stream, next i call the function.我还更改了 javascript 的顺序,所以首先我声明 function 以添加视频和内部 div,然后我使用 null stream 创建虚拟视频元素,接下来我调用 function。
Inside the function I first get the videoGrid
element and the run the code as you had it.在 function 中,我首先获取videoGrid
元素并按照您拥有的方式运行代码。
I've also changed the css code accordingly to work with the <div class="video">
element instead of the <video>
tag and changed some of properties of the video-name
and the video
elements.我还相应地更改了 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.