Добавление внутренних разделов в нижний правый угол видео

Я работаю над приложением для видеочата, используя Nodejs, socket.io и WebRTC (библиотека PeerJS). На странице входа пользователь вводит свое имя и перенаправляется на страницу, на которой его видеопотоки (через WebRTC) и могут подключаться к своим сверстникам. Это работает нормально, и видео динамически добавляются в DOM. После того, как каждый одноранговый узел присоединяется, я хотел бы динамически добавить имя каждого вошедшего в систему пользователя в правом нижнем углу его/ее видео с помощью Javascript.

В моей функции ниже я добавил статическое имя только для целей отладки.

Функция JavaScript

//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;
}

javascript css webrtc peerjs
person Pweb    schedule 21.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я придумал возможное решение. У вас было много отсутствующих ; в коде, который вы разместили, но я предполагаю, что если у вас есть работающая функция, они должным образом размещены там.

Здесь я создаю фиктивный элемент <div class="video"></div> для целей тестирования вместо создания элемента тега <video>. Также я изменил порядок javascript, поэтому сначала я объявляю функцию для добавления видео и внутреннего div, затем я создаю фиктивный элемент видео с нулевым потоком, затем я вызываю функцию.

Внутри функции я сначала получаю элемент 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>

person Nicholas Gooding Rios    schedule 21.08.2020
comment
,,Спасибо за помощь, проверим ваше решение и скоро свяжемся с вами по результату - person Pweb; 21.08.2020
comment
В реальном видео с потоком имя не отображается, скорее всего, оно появляется за потоком - person Pweb; 21.08.2020
comment
@Pweb в этом случае попробуйте использовать z-index: 1000 !important; в конфигурации css, чтобы он отображался поверх всего остального. Также проверьте код с помощью инструментов разработчика браузера, был ли элемент создан и существует ли он, и дайте мне знать, чтобы мы могли проверить, в чем проблема. - person Nicholas Gooding Rios; 22.08.2020