I am new to JS and I am trying to create dynamic websites and learn from it. However I am struggeling as I have tried multiple codes and trials but I always have a duplicate video.
This is the HTML:
<div class="container" id="cnn">
</div>
This is the JS code:
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);
}
}
});
}
Please remove the child elements from the node before adding new element to that node
const currentDiv = document.getElementById("cnn");
currentDiv.innerHTML = "";
currentDiv.appendChild(brr);
Try accessing the element directly to remove it, instead of referring to "this" rather query it from the DOM and remove it like that. You can access it through
document.getElementById("vdd").remove();
Unless I misunderstood what video was duplicated, if there is an issue with the second video, you never append the div to the document, you only append the new video to the div element, the element wont show up because of this.
Let me know if I misunderstood your issue. :)
You are creating more than one <video>. video.addEventListener("timeupdate", function () { }) is called more than once before the first video is effectively removed.
I would suggest inverting the usage of step2 flag to make sure step2 is only executed once.
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>