HTML5 동영상 : 지연 이벤트

Question

Google 크롬에 HTML5 동영상 태그를 사용하여 동영상 플레이어를 작성 중입니다. 일부 동영상 (1)을 표시 한 다음 다른 동영상을 표시하고 나중에 다시 동영상을 만들기 위해 DOM 문서에서 동영상을 삭제해야합니다. 태그는 (1)과 동일한 파일을 가리 킵니다.

내가 두 번째로로드 할 때 동영상이 표시되지 않고 대신 '정지 된'이벤트가 발생하는 것으로 나타났습니다.이 이벤트를 처리하고 동영상을 표시하려면 어떻게해야합니까? 첫 번째 비디오 태그에 대한 참조를 유지 한 후 나중에 다시 사용하면 각 비디오 태그에 대한 참조를 유지하는 데 많은 메모리가 필요합니다.

Answer 1

브라우저에서 한 번에로드하려고하는 비디오가 2-3 개 이상인 경우 그 중 일부는 정지하게됩니다. HTML5 동영상은 동영상로드를 시작하는 방법을 제공하지만 멈추라는 방법은 없습니다. 메모리에있는 한 처음 재생을 시작하면 다시 재생하기로 결정한 경우 계속해서 더 많은 데이터를로드하려고 시도합니다. 한 번에 너무 많은 동영상 만로드하므로 처음 세 개의 동영상을로드하는 경우 네 번째 동영상은 아주 오래 동안 기다릴 것입니다.

오래된 동영상을 삭제하고 나중에 다시로드하는 것이 올바른 방법이지만 브라우저에서 동영상을로드하는 것을 멈추게하려면 매우 철저히 조사해야합니다. 여기 당신이해야 할 일이 있습니다.

// 1) Pause the video 
oldVideo.pause(); 

// 2) Clear the video source URL 
oldVideo.src = ""; 

// 3) Tell the video to start loading "nothing" 
oldVideo.load(); 

마지막 단계는 매우 중요합니다. src을 빈 문자열로 설정해도 동영상은 load에 전화 할 때까지 무시됩니다. 원하는 경우 DOM 및 모든 데이터 구조에서 제거하여 완전히 가비지 수집 할 수 있습니다. 그러나 그렇게해도 src을 삭제하고 load으로 전화하지 않으면 가비지 수집되지 않습니다.

다음 번에 비디오를로드 할 때 새 요소를 만들거나 src을 동일하게 설정하면 잘 작동합니다.