HTML5에서는 VIDEO / AUDIO의 기능이 매우 폭넓게 확장되었습니다. 그런데 크롬 및 기타 브라우저에서 m3u8 확장자를 가진 영상을 재생할 경우 플레이되지 않을 수 있습니다. 이는 해당 디바이스 및 OS에서 지원하지 않기 때문입니다. 이 경우 해결하기 위한 방법으로 hls.js를 사용하는 방법이 있습니다.

hls.js를 사용하는 방법에 대하여 알아볼까 합니다. 대부분의 써드파티 앱처럼 이 역시 인스턴스를 생성하고 메소드를 호출하는 방식을 사용합니다.


# HLS.js 시작하는 방법

아래 방법은 hlsVideo라는 이름으로 인스턴스를 생성하고 몇 가지 이벤트 및 제어 코드를 추가한 모습입니다.

var config = {
  fragLoadingTimeOut: 10000,
  fragLoadingMaxRetry: 3 // config는 기본값을 가지고 있으므로 사용하지 않아도 무방함
};

var hlsVideo = new Hls(config); // config가 없는 경우 new Hls()를 사용
hlsVideo.loadSource(재생할 파일);
hlsVideo.attachMedia(추가할 비디오 요소);

hlsVideo.on(Hls.Events.ERROR, function(event, data) {
  var errorType = data.type;
  var errorDetails = data.details;
  var errorFatal = data.fatal;
  
  hlsVideo.destroy();
// 에러가 발생한 경우 ajax 통신을 막기 위해 destroy()를 호출
});


더 자세한 내용은 github의 hls 페이지에서 확인 가능합니다.
https://github.com/video-dev/hls.js

많은 js 플레이어들이 hls.js를 확장 및 변경하여 만들어졌습니다.