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

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

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是行不通的。提示错误：

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

来源

2017-09-27 Liz.

您需要将您的字符串解析到一个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');

来源

2017-09-27 09:32:17

其给出了一个错误'未能执行' '节点'上的appendChild'：类型'#document'的节点可能不会被插入类型为'VIDEO'的节点内。' –

@Liz。尝试使用'insertBefore（）'或'insertAfter（）'，而不是将其作为视频节点的子节点插入。更多关于这些方法[这里]（https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore）。在将它插入到位于视频节点上方的“DOM”位置之后。 –

感谢您分享链接。它帮助了我 –

我已经得到了解决。我试图使用removeChild(preloader)。 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>

来源

2017-09-27 14:00:07

回答

相关问题