在 DOM 中动态创建视频会导致重复答案

【问题标题】：Dynamically creating a video in DOM result in a duplicated在 DOM 中动态创建视频会导致重复
【发布时间】：2021-11-22 05:18:24
【问题描述】：

我是 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);
    
    }
    
 }

});

}

【问题讨论】：

脚本应该做什么？现在它会在timeupdate 事件被触发时添加一个新的<video> 元素和src="../images/space.mkv" ("当currentTime 属性指示的时间已更新时。事件频率取决于系统加载，但会在大约 4Hz 和 66Hz 之间抛出（假设事件处理程序的运行时间不超过 250 毫秒）。") 和.currentTime >= 1。

标签： javascript api dom dynamic

【解决方案1】：

在向该节点添加新元素之前，请先从该节点移除子元素

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

【讨论】：

这是一个黑客。不能解决多次添加 <video> 元素的根本问题。

【解决方案2】：

尝试直接访问元素来删除它，而不是引用“this”，而是从 DOM 中查询它并像那样删除它。您可以通过

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

除非我误解了复制的视频，否则如果第二个视频有问题，您永远不会将 div 附加到文档中，您只会将新视频附加到 div 元素，因此该元素不会显示。

如果我误解了您的问题，请告诉我。 :)

【讨论】：

【解决方案3】：

您正在创建多个<video>。在第一个 video 被有效删除之前，video.addEventListener("timeupdate", function () { }) 被多次调用。

我建议颠倒 step2 标志的用法，以确保 step2 只执行一次。

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>

【讨论】：