video 태그 m3u8 포맷 스트리밍 지원여부 확인

video 기능 감지

function supports_video() { 
  return !!document.crealeElement('video').canPlayType; 
}

 

비디오 포맷은 Boolean으로 return하지 않고 다음과 같은 문자열을 return 합니다.

 

• "probably" : 브라우저는 이 포맷을 재생할 수 있다고 거의 확신합니다.
• "maybe" : 브라우저는 아마도 이 포맷을 재생할 수 있다고 생각됩니다.
• " ": 브라우저는 이 포맷을 재생할 수 없다고 확신합니다.

크롬에서 Video태그에 바로 m3u8 포맷이 재생되지 않는 경우가 발생될 수 있습니다. 원인은 크롬 및 기타 디바이스 환경에서 HLS를 완전히 지원하지 않기 때문에 발생합니다.
이 경우 HLS를 지원하는 iOS, Safari는 잘 작동 하지만 지원되지 않는 환경에서는 HLS를 지원하게 해주는 서드파티 JS (hls.js) 를 사용하면 해결 가능합니다.

HLS는 HTTP Live Streaming의 약자입니다. 말그대로 HTTP 프로토콜을 사용하는 실시간 스트리밍 방식입니다.
HLS는 스트리밍에 .m3u8, .ts 형식의 파일을 사용합니다.
.m3u8: 스트리밍할 동영상을 분할한 파일(.ts 파일)들의 정보가 순차적으로 저장되어있는 파일입니다.
.ts: 분할된 동영상 파일이라고 생각하시면 될 것 같습니다. (TypeScript 아닙니다.)

 

HLS 지원여부 방법은 다음과 같습니다.

/**
 * https://github.com/videojs/videojs-contrib-hls
 * Whether the browser has built-in HLS support.
 */
videojs.Hls.supportsNativeHls = (function() {
  var
    video = document.createElement('video'),
    xMpegUrl,
    vndMpeg;
  // native HLS is definitely not supported if HTML5 video isn't
  if (!videojs.Html5.isSupported()) {
    return false;
  }
  xMpegUrl = video.canPlayType('application/x-mpegURL');
  vndMpeg = video.canPlayType('application/vnd.apple.mpegURL');
  return (/probably|maybe/).test(xMpegUrl) ||
    (/probably|maybe/).test(vndMpeg);
})();

var video = document.getElementById('video');
var videoSrc = 'https://test.dev/tmp/index.m3u8';

// HLS를 지원하는지 체크
if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = videoSrc;
  
// HLS를 지원하지 않는다면 hls.js 사용 
} else if (Hls.isSupported()) {
  var hls = new Hls();
  hls.loadSource(videoSrc);
  hls.attachMedia(video);
}