새로 생성 된 비디오 요소 내부에 요소 생성/삭제

비디오 요소가 처음 생성 될 때까지 비디오 요소가 새로 생성되고 나면 비디오가로드되기 시작할 때 회 전자를 표시하고 해당 요소를 삭제하려고합니다.새로 생성 된 비디오 요소 내부에 요소 생성/삭제

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

출처

2017-09-27 Liz.

당신은 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

는'실행하지 못했습니다 - 다음과 같은 요소의

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를했다 후 추가/제거 appendChild 'on'Node ':'#document '유형의 노드가'VIDEO '유형의 노드 안에 삽입되지 않을 수 있습니다.' –

@ Liz. 비디오 노드의 자식으로 삽입하는 대신'insertBefore()'또는'insertAfter()'를 사용해보십시오. 이 방법에 대한 자세한 내용은 [here] (https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore)를 참조하십시오. 'DOM'에 삽입하면 비디오 노드 위에 위치하게됩니다. –

링크를 공유해 주셔서 감사합니다. 그것은 나를 도왔다. –

나는 해결책을 가지고있다. removeChild(preloader)을 사용하려고했습니다. 프리 로더는 전체 html 요소를 반환합니다. 따라서, 그것을 제거하여 내 문제를 해결 id에 의해. 또한 비디오 태그 안에 프리 로더 요소를 추가하는 것은 잘못된 접근이며 로더를 표시하지 않습니다.

의 오류를 제공

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

출처

2017-09-27 14:00:07

답변

관련 문제