cloneNode()가 html 비디오 래그를 생성하고 때로는 전혀 렌더링하지 않습니다

Question

video을 클릭하면 원래 위치에서 일부 대상 위치로 애니메이션이 적용됩니다. 이유 때문에 원본 video 요소를 애니메이션으로 만들 수 없으므로 cloneNode()에 의해 생성 된 복제본에 애니메이션을 적용합니다. 클릭 만하면 약 5 개의 동영상 (20 초 미만)과 5 개의 이미지가 순환됩니다. 내 애니메이션 방법으로 인해 비디오 만 지연되고 때로는 전혀 렌더링되지 않는 반면 이미지는 영향을받지 않은 것처럼 보였습니다. 내가 한 줄을 제외하고 내 애니메이션의 모든 코드를 주석 :

var clone = videoElement.cloneNode(false); 

을 애니메이션 코드없이 이미지/비디오는 (예상되는) 즉시 목표 위치로 텔레포트. 그러나 단 한 줄을 주석 처리하지 않은 상태로두면 상대적으로 빨리 클릭 할 때 동영상이 조금 지연 될 수 있습니다 (운이 좋으면). 크롬에서는 전혀 렌더링되지 않습니다. Edge에서는 비디오를 렌더링하는 데 몇 초가 걸립니다. 해당 선을 제거하면 동영상을 클릭하는 속도에 상관없이 동영상이로드/렌더링됩니다.

1. 왜 이런 일이 발생합니까? cloneNode 정말 느린가요?
2. 이 문제에 대한 실질적인 해결책이 있습니까?

Answer 1

문제는 cloneNode()에서와 같이 보였지만 내 비디오의 소스로 mp4 파일을 사용했기 때문에 나타났습니다. mp4는 Chrome에서 사용되지 않습니다. webm 비디오 파일로 변환하자마자 지연/렌더링 문제가 완전히 사라졌습니다.