Блог

Главная - Вопросы по программированию - Динамическое создание видео в DOM приводит к дублированию

Динамическое создание видео в DOM приводит к дублированию

#javascript #api #dom #dynamic

Вопрос:

Я новичок в JS и пытаюсь создавать динамичные веб — сайты и учиться на них. Однако я борюсь, так как перепробовал несколько кодов и проб, но у меня всегда есть дубликат видео.

Это HTML:

 <div class="container" id="cnn">
        

</div>

Это код JS:

 function enter() {
 var video = document.createElement("video");
 video.type = "video/mp4";
 video.src = "../images/myMovie.mp4";
 video.autoplay = true;
 video.muted = true;
 video.id = "vdd"
 document.body.appendChild(video);

 var step2 = false;


video.addEventListener("timeupdate", function(){

// current time is given in seconds
if(this.currentTime >= 1) {
    // pause the playback
    this.pause();
    this.remove();
    step2 = true;
    if (step2 == true){
      document.getElementById("cnn").style.display = "inline"
      console.log("Test 1");
    
      const x = document.createElement("video");
      const brr = document.createElement("div");
    
      x.type = "video/mkv";
      x.src = "../images/space.mkv";
      x.autoplay = true;
      x.muted = true;
      x.id = "vdd1"
      
     brr.appendChild(x);
    
    // add the newly created element and its content into the DOM
    const currentDiv = document.getElementById("cnn");
    currentDiv.appendChild(brr);
    
    }
    
 }

});

}

Комментарии:

1. Что должен делать сценарий? Прямо сейчас он добавляет новый <video> элемент с src="../images/space.mkv" указанием того, когда когда-либо timeupdate происходит событие ( «когда время, указанное currentTime атрибутом, было обновлено. Частота событий зависит от загрузки системы, но будет передаваться примерно от 4 Гц до 66 Гц (при условии, что для запуска обработчиков событий требуется не более 250 мс).» ) и .currentTime >= 1 .

Ответ №1:

Пожалуйста, удалите дочерние элементы из узла, прежде чем добавлять новый элемент в этот узел

 const currentDiv = document.getElementById("cnn");
currentDiv.innerHTML = "";
currentDiv.appendChild(brr);

Комментарии:

1. Это взлом. Не устраняет основную проблему <video> , связанную с тем, что элемент добавляется более одного раза.

Ответ №2:

Попробуйте получить доступ к элементу напрямую, чтобы удалить его, вместо того, чтобы ссылаться на «это», скорее запросите его из DOM и удалите его таким образом. Вы можете получить к нему доступ через

 document.getElementById("vdd").remove();

Если я не неправильно понял, какое видео было продублировано, если есть проблема со вторым видео, вы никогда не добавляете div в документ, вы только добавляете новое видео в элемент div, элемент не будет отображаться из-за этого.

Дайте мне знать, если я неправильно понял вашу проблему. 🙂

Ответ №3:

Вы создаете более одного <video> . video.addEventListener("timeupdate", function () { }) вызывается несколько раз, прежде чем первый video будет эффективно удален.

Я бы предложил инвертировать использование step2 флага, чтобы убедиться, что шаг 2 выполняется только один раз.

 var video = document.createElement("video");
video.type = "video/mp4";
video.src =
  "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
video.autoplay = true;
video.muted = true;
video.id = "vdd";
document.body.appendChild(video);

var step2 = false;

video.addEventListener("timeupdate", function () {
  // current time is given in seconds
  if (this.currentTime >= 1) {
    // pause the playback
    this.pause();
    this.remove();
    if (step2 === false) {  // <-- SEE HERE
      step2 = true;         // <-- SEE HERE

      document.getElementById("cnn").style.display = "inline";
      console.log("Test 1");

      const x = document.createElement("video");
      const brr = document.createElement("div");

      x.type = "video/mp4";
      x.src =
        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4";
      x.autoplay = true;
      x.muted = true;
      x.id = "vdd1";

      brr.appendChild(x);

      // add the newly created element and its content into the DOM
      const currentDiv = document.getElementById("cnn");
      currentDiv.appendChild(brr);
    }
  }
}); 
 <!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="container" id="cnn"></div>
    <script src="index.js"></script>
  </body>
</html>
Метки: