web 에서 스무스하게 동영상 재생하기

m3u8 + hls.js = 짱짱맨.

1. 알맞은 동영상 관련 라이브러리 사용하기
사실 이건 동영상 재생의 최적화 보다는 프로젝트의 최적화와 관련이 있는 부분이다. 
react-player는 내부에 hls.js 를 갖고 있고, 이를 react 방식으로 export 해주며, 다양한 플랫폼을 지원 (ex. youtube, vimeo.. )하는데에 장점이 있다. 하지만 TV 프로젝트의 경우 m3u8 형식으로 내려오는 소스를 그냥 재생하면 끝일 뿐이라서 굳이 react-player 를 선택할 필요가 없었다. 오히려 2번 때문에 hls.js 가 더 적합했다..

2. 최초 동영상을 다운받는 시간에 영향은 미치는 config 항목 조절하기
m3u8 형식은 HLS(HTTP Live Streaming) 프로토콜을 따르는 동영상 스트림 파일 형식이다. HLS는 애플에서 개발한 스트리밍 프로토콜로, 동영상을 작은 조각으로 나누어 순차적으로 전송 및 재생한다. 프론트에서는 이를 이용, 적응형 비트레이트 스트리밍을 할 수 있다. 

hls.js 라이브러리의 큰 장점은 세부 config 조절에 있다. config 에서 초기 화질을 startLevel 로 설정할 수 있는데, 이 설정은 사용자의 네트워크 환경과 함께 최초 동영상(=데이터)를 다운로드받는 시간에 영향을 미친다.

const hls = new Hls({
    startLevel: 0 // 초기 화질 레벨 (0은 최저 화질)
});

3. 최적의 Video 태그 이벤트 사용하기
TV 프로젝트에서는 페이지 진입 직후 동영상이 재생되어야했는데, 영상이 한 순간도 멈춰있으면 안되는 조건이 있었다. 하지만 초기 데이터를 아무리 낮은 화질로 가볍게 받아와도 web보다 재생 속도가 느린 문제가 있었다. 따라서 비디오를 일시적으로 로더로 가려주고, 재생이 가능한 시점에서 로더를 제공하는 식으로 구현했다. 이 구현을 위해 비교했던 video 태그 이벤트들 중 인상적인 것들을 이벤트 실행 순서대로 정리해둔다. (react 에서 사용하는 핸들러 방식으로다가,,)

- onLoadedMetadata: 메타데이터(예: 동영상 길이, 트랙 목록 등)가 로드된 후 발생한다. 메타데이터가 로드된 것일뿐, 실제 동영상 프레임과는 무관하다.
- onLoadedData: 동영상의 첫 번째 프레임이 로드된 후 발생한다. 이 이벤트가 발생하면 일단 비디오태그에서 보여줄 거리는 있다. 단, 이 때 poster 속성의 이미지가 보인다는 보장은 없다. poster에 넣어준 이미지가 보이는지 확인하려면 video element의 attribute 를 잡아서 해당 이미지의 onload 이벤트를 따로 확인해줘야한다. 

<video id="myVideo" poster="path/to/poster.jpg" controls>
  <source src="path/to/video.mp4" type="video/mp4">
</video>
<script>
  const video = document.getElementById('myVideo');
  const posterUrl = video.getAttribute('poster');
  const posterImage = new Image();

  posterImage.onload = function() {
    console.log('포스터 속성에 넣어준 이미지가 보이고 있습니다.');
  };

  posterImage.src = posterUrl;
</script>

- onCanPlay: 동영상을 재생할 준비가 되었으며, 최소한의 데이터가 로드된 후 발생한다. 다만 '최소한' 이기 때문에 이 시점에서 play 가 될 경우, 비디오가 어드메쯤에서 pause 된 상태로 데이터 버퍼링에 걸릴 수 있다.
- onCanPlayThrough: 중단 없이 동영상을 끝까지 재생할 수 있을 만큼 충분한 데이터가 버퍼링된 후 발생한다.