loadedData / canPlay / canPlayThrough 이벤트

 

 loadedData 이벤트

미디어의 현재 재생 위치에 있는 프레임이 로드를 완료하면 이벤트가 트리거 된다.

const $video = document.querySelector('video');

$video.addEventListener('loadeddata', (e) => {
  console.log('Yay! The readyState just increased to  ' +
      'HAVE_CURRENT_DATA or greater for the first time.');
});

 

 

canPlay 이벤트

canplay 이벤트는 브라우저가 미디어를 재생할 수 있으면 이벤트가 트리거 된다. 단, 추가 버퍼링을 위해 멈추지 않고 끝까지 재생하기에 충분한 데이터가 로드된 것은 아니라고 본다.

const $video = document.querySelector('video');

$video.addEventListener('canplay', (e) => {
  console.log('Video can start, but not sure it will play through.');
});

 

 

canPlayThrough 이벤트

canplaythrough 이벤트는 브라우저가 미디어를 재생할 수 있으면 이벤트가 트리거 된다. 추가 버퍼링을 위해 멈추지 않고도 끝까지 재생할 수 있을 만큼 충분한 데이터가 로드되었다고 본다.

const $video = document.querySelector('video');

$video.addEventListener('canplaythrough', (e) => {
  console.log('I think I can play through the entire ' +
      'video without ever having to stop to buffer.');
});

 

 

참고자료

MDN - HTMLMediaElement: loadeddata event

MDN - HTMLMediaElement: canplay event

MDN - HTMLMediaElement: canplaythrough event