在新创建的视频元素中创建/删除元素

Question

I am creating a new video element and then wants to show a spinner when video has started loading until it gets the first frame and then delete that element. Following is my code -

var videoElem, src;
videoElem = document.createElement("video");
videoElem.src = src;

var preloader = '<div class="preloader-wrapper"><div class="spinner-layer"><div class="circle-clipper left"><div class="circle"></div></div>' + '<div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>';

//renders when video has started loading - show preloader
videoElem.addEventListener("loadstart", function () {
    console.log("Video has started loading...!");
    //jQuery(preloader).insertBefore(videoElem); //works fine but I don't know how to delete the preloader in the loadeddata eventlistener
    videoElem.appendChild(preloader);
});

//renders when is loaded - delete preloader
videoElem.addEventListener("loadeddata", function () {
    console.log("Video has loaded successfully!");
    videoElem.removeChild(preloader);
});

The appendChild and removeChild is not working. Gives error :

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node' at HTMLVideoElement.eval

Answer 1

You need to parse your string to an HTML Node in order to append it to another HTML Nodes .

You can do it with DOMParser :

var preloader = new DOMParser().parseFromString('<div class="preloader-wrapper"><div class="spinner-layer"><div class="circle-clipper left"><div class="circle"></div></div>' + '<div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>', 'text/html');

Answer 2

I have got the solution. I was trying to use removeChild(preloader) . Preloader here returns the whole html element. Therefore, by removing it by id solved my problem. Also, preloader element adding inside a video tag is wrong approach and would not show the loader. For this, I took the id of main div element and then added/removed the preloader as follows -

var videoLoader = '<div id="videoLoader" class="preloader-wrapper"><div class="spinner-layer"><div class="circle-clipper left"><div class="circle"></div></div>' + '<div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>';

var parentDiv = document.getElementById('parentDiv');
parentDiv.insertAdjacentHTML('afterbegin',videoLoader); // add in loadstart listener
parentDiv.removeChild(document.getElementById('videoLoader')); //add in loadeddata  listener

Output of elements is as follows -

<div id="parentDiv">
   <div id="videoLoader">..preloader..</div>
   <video>...</video>
</div>