[HTML5] Audio 태그와 Video 태그 이벤트 :: 마이구미

이 글은 미디어 태그인 <audio>, <video> 태그가 가지고 있는 이벤트들을 다룬다.
그 중에서 헷갈리기 쉬운 이벤트들을 정리한다.
=> loadeddata, loadedmetadata, canplay, canplaythrough
https://developer.mozilla.org/ko/docs/Web/API/HTMLMediaElement

 

 

미디어 태그(audio, video) 를 사용하는 경우, 대부분 해당 태그가 가지는 이벤트들을 제어해야한다.

예를 들어, play() 메소드를 호출하면 play 이벤트가 발생하고, pause() 를 호출하면 pause 이벤트가 발생한다.

 

audio.addEventListener('play', () => {
	console.log('play event');
});

audio.play();

 

그 외에도 많은 메소드와 이벤트가 존재한다. (https://www.w3schools.com/tags/ref_av_dom.asp)

그 중에서 여기서는 "loadeddata vs loadedmetadata", "canplay vs canplaythrough" 를 보려고 한다.

네이밍을 보고 "로드가 된 이후"와 "재생을 할 수 있을 때" 를 추측할 수 있다.

 

해석 그대로의 의미를 가지지만, 각 둘 사이의 차이점은 다음과 같다.

 

loadedmetadata

미디어의 메타 데이터가 로드되었을 때를 나타낸다.

메타 데이터는 우리가 유용하게 사용할 수 있는 동영상의 재생시간과 같은 것을 의미한다.

미디어가 로드되기 전에, 먼저 메타 데이터를 뽑아와서 활용할 수 있다.

 

loadeddata

미디어의 프레임이 로드되었을 때를 나타낸다.

여기서 프레임은 미디어에 대한 전체 프레임이 아닌, 첫 프레임 또는 현재 프레임을 뜻할 수 있다.

즉, 조금이라도 다운로드가 되었을 때이고, 이러한 의미는 재생할 수 있다는 것을 알아차릴 수 있다.

하지만 주의해야할 것은 로드된 데이터가 재생에 있어서, 충분하다고 보장하지않는다.

즉, loadeddata 이벤트가 발생한 시점에서 play() 메소드를 호출하면, 재생이 실패할 수도 있다.

 

audio.addEventListener('loadedmetadata', () => {
  console.log('meta loaded')
  const d = audio.duration;
  ......
});

audio.addEventListener('loadeddata', () => {
  console.log('data loaded');
  ......
});

 

메타 데이터를 우선 가져오기에, loadedmetadata 이벤트가 발생한 후에, loadeddata 이벤트가 발생한다고 볼 수 있다.

즉, loadeddata 에서도 메타 데이터를 활용할 수 있다는 것이다.

 

canplay

재생을 할 수 있는 정도의 충분한 데이터가 로드되었을 때, 미디어는 재생할 수 있다고 판단하고 이벤트를 호출한다.

즉, canplay 이벤트는 미디어에 대한 재생을 할 수 있다는 것을 나타낸다.

loadeddata 에서는 재생을 보장하지 못했지만, 여기서는 재생을 보장한다.

하지만 재생을 보장하지만, 버퍼로 인해 중단될 수 있다.

즉, 재생을 보장한다는 것은, 전체 재생이 아닌 현재 시점에서 재생을 할 수 있는지 없는지를 나타낸다.

그리고 다른 면에서 조금 더 생각해보면, canplay 이벤트는 loadeddata 이벤트가 일어난 후에 호출된다.

 

canplaythrough

canplay 이벤트와 동일하지만, 차이점은 전체 미디어가 중단없이 재생할 수 있을 때 호출된다.

canplay 이벤트가 전체 재생을 보장하지는 못하였다면, canplaythrough 는 중단없이 전체 재생을 보장하는 목적이다.

현재 로드 속도를 유지한다고 가정하고, 중단이 되지 않는다고 판단하면 호출된다.

하지만 이것 또한 가정이기때문에, canplay 이벤트보다는 전체 재생을 보장하겠지만, 확신할 수는 없다.

그리고 다른 면에서 조금 더 생각해보면, canplaythrough 이벤트는 canplay 이벤트가 일어난 후에 호출된다.

 

audio.addEventListener('canplay', () => {
  audio.play();
});

audio.addEventListener('canplaythrough', () => {
  audio.play();
});

 

결과적으로 순서는 loadedmetadata -> loadeddata -> canplay -> canplaythrough 를 의미할 수 있다.

 

사용 방법은 다양할 것이고, 좋고 나쁜 건 없다고 본다.

충분히 이해하고 각 목적에 따라, 사용하면 된다.

자주 사용은 하고 있지만, 확실히 알아두지 않는 개념이라고 생각한다.

알아두면 충분히 유용하게 사용할 수 있을 것이다.