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

【问题标题】：Create/delete element inside newly created video element在新创建的视频元素中创建/删除元素
【发布时间】：2017-09-28 00:04:31
【问题描述】：

我正在创建一个新的视频元素，然后想在视频开始加载时显示一个微调器，直到它获得第一帧，然后删除该元素。以下是我的代码 -

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

appendChild 和 removeChild 不起作用。给出错误：

未捕获的类型错误：无法在“节点”上执行“removeChild”：参数 1 在 HTMLVideoElement.eval 中不是“节点”类型

【问题讨论】：

标签： javascript video createelement

【解决方案1】：

您需要将您的字符串解析为HTML Node，以便将其附加到另一个HTML Nodes。

您可以使用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');

【讨论】：

它给出了一个错误Failed to execute 'appendChild' on 'Node': Nodes of type '#document' may not be inserted inside nodes of type 'VIDEO'.
@Liz。尝试使用insertBefore() 或insertAfter()，而不是将其作为视频节点的子节点插入。有关这些方法的更多信息here。将其插入到DOM 后，将其置于视频节点上方。

【解决方案2】：

我已经找到了解决方案。我试图使用removeChild(preloader)。这里的预加载器返回整个 html 元素。因此，通过 id 删除它解决了我的问题。此外，在视频标签内添加预加载器元素是错误的方法，不会显示加载器。为此，我获取了主 div 元素的 id，然后按如下方式添加/删除了预加载器 -

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

元素的输出如下 -

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

【讨论】：