video loadmetadata 이벤트가 일관되게 실행되지 않는 이유

<video src="test.webm" id="video"></video>

<script>
var video = document.getElementById('video');
video.onloadedmetadata = function(e) {
  alert('Got loadedmetadata!');
}
</script>

로컬 또는 빠른 네트워크 환경에서 테스트하는 경우 비디오가 빠르게 로드됨

즉 loadedmetadata, 이벤트 리스너를 설정하는 스크립트가 실행되기 전에 브라우저가 실행

 

반면에 비디오를 로드하는 데 시간이 조금 더 오래 걸리는 느린 네트워크를 통해 테스트하는 경우 브라우저에서 이벤트를 실행하기 전에 스크립트가 실행될 수 있습니다. 

 

이벤트를 받는지 여부는 단순히 네트워크 조건, 비디오가 캐시되었는지 여부, 마크업에서 TCP 패킷 경계가 발생한 위치에 따라 달라짐

 

 

해결방법

 

아래 두가지 방법은 네트워크 환경에 관계없이 loadedmetadata 이벤트 리스너가 미리 등록되어 있기 때문에 항상 이벤트가 발생됨

 

1. <video>요소에 속성으로 이벤트 추가

<video src="test.webm" onloadedmetadata="alert('Got loadedmetadata!')"></video>

2. 자바스크립트로 비디오 요소 생성 후 이벤트 추가

var video = document.createElement('video');
video.onloadedmetadata = function(e) {
  alert('Got loadedmetadata!');
}
video.src = 'test.webm';
document.body.appendChild(video);

 

 

 

 

Dev.Opera — Consistent Event Firing With HTML5 Video