在新創建的視頻元素中創建/刪除元素

我正在創建一個新的視頻元素，然後想要在視頻開始加載前顯示一個微調框，直到它獲得第一幀，然後刪除該元素。以下是我的代碼 -在新創建的視頻元素中創建/刪除元素

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

回答

相關問題