Soy nuevo en JS y estoy tratando de crear sitios web dinámicos y aprender de ellos. Sin embargo, estoy luchando porque probé varios códigos y pruebas, pero siempre tengo un video duplicado.
Este es el HTML:
<div class="container" id="cnn"> </div>Este es el código 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); } } });}
Elimine los elementos secundarios del nodo antes de agregar un nuevo elemento a ese nodo
const currentDiv = document.getElementById("cnn"); currentDiv.innerHTML = ""; currentDiv.appendChild(brr);Intente acceder al elemento directamente para eliminarlo, en lugar de referirse a "esto", en lugar de consultarlo desde el DOM y eliminarlo así. Puede acceder a través de
document.getElementById("vdd").remove();A menos que haya entendido mal qué video se duplicó, si hay un problema con el segundo video, nunca agrega el div al documento, solo agrega el nuevo video al elemento div, el elemento no aparecerá debido a esto.
Déjame saber si entendí mal tu problema. :)
Estás creando más de un <video> . video.addEventListener("timeupdate", function () { }) se llama más de una vez antes de que el primer video se elimine efectivamente.
Sugeriría invertir el uso del indicador step2 para asegurarse de que step2 solo se ejecute una vez.
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>