Question

新しいビデオ要素を作成していて、最初のフレームが取得されるまでビデオの読み込みを開始してからその要素を削除するまでスピナーを表示します。以下の私のコードです -

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が機能していません。エラーを与える：

あなたが別の HTML Nodesにそれを追加するために、 HTML Nodeにあなたの文字列を解析する必要が

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

Answer 1

。

あなたは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

私は解決策を持っています。 removeChild(preloader)を使用しようとしていました。プリローダーはHTML要素全体を返します。したがって、それを削除することで、私の問題を解決した。また、ビデオタグ内に追加するプリローダー要素は間違ったアプローチであり、ローダーを表示しません。

そのエラーを与える

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