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

HTTP 라이브 스트리밍(HTTP Live Streaming, HLS)은 애플이 개발하여 2009년 출시한 HTTP 기반 적응 비트레이트 스트리밍 통신 프로토콜이다. 이 프로토콜은 여러 미디어 플레이어, 웹 브라우저, 모바일 기기, 스트리밍 미디어 서버에서 지원되고 있다. 연간 비디오 산업 조사에 따르면 가장 대중적인 스트리밍 포맷으로 간주된다.[2]

HLS는 전반적인 스트림을 크기가 작은 일련의 HTTP 기반 파일 다운로드로 분리시켜 개개의 다운로드를 통해 잠재적으로 무한한 전송 스트림의 작은 덩어리를 적재시킴으로써 동작한다는 면에서 MPEG-DASH와 유사하다. 각기 다른 비트레이트로 인코딩되는, 이용 가능한 스트림 목록은 확장 M3U 플레이리스트를 사용하여 클라이언트에 전송된다.[3]

표준 HTTP 트랜잭션에 기반한 HTTP 라이브 스트리밍은 RTP 등 UDP 기반 프로토콜과 달리 표준 HTTP 트래픽을 통해 방화벽이나 프록시 서버를 경유할 수 있다. 또, 널리 이용되는 HTTP 기반 콘텐츠 전송 네트워크를 통해 콘텐츠를 전통적인 HTTP 서버로부터 제공받을 수 있다.[4] 이 표준은 또한 표준 암호화 매커니즘[5]과 HTTPS를 이용한 보안 키 배포를 사용하며 이 둘은 단순한 DRM 시스템을 제공하게 된다. 이 프로토콜의 후반 버전은 트릭 모드 빨리감기와 되감기, 자막 연동을 제공한다.

 

 

HTML5의 Video태그에서 m3u8 포맷이 재생되지 않는 경우가 크롬에서 발생될 수 있습니다. 이 경우 해결방법은 무엇일까요?

원인은 크롬 및 기타 디바이스 환경에서 HLS를 완전히 지원하지 않기 때문에 발생합니다. 이 경우 브라우저를 다른 것으로(Ex. Edge) 바꾸거나 HLS를 지원하는 iOS, Safari 등으로 바꾸면 해결될 수 있습니다. 만약 반드시 해당 환경에서 지원이 필요하다면 Flash를 서포트하는 별도의 어플리케이션을 설치하거나 Javascript를 사용하여 HLS를 지원하게 해주는 서드파티 js를 설치해주는 방법으로도 해결이 가능합니다.

hdsJS
videoJS
...

또 다른 원인으로 Video 태그의 Source 타입이 맞지 않을 수도 있으니 아래의 type을 확인하는 것도 필요합니다.
type속성을 아래와 같이 변경 후 다시 시도해보세요.

<video>
  <source type="application/x-mpegURL" src="webisfree.m3u8" />
</video>

<video>
  <source type="vnd.apple.mpegURL" src="webisfree.m3u8" />
</video>

https://webisfree.com/2017-04-21/html5%EC%9D%98-video%ED%83%9C%EA%B7%B8%EC%97%90%EC%84%9C-m3u8-%ED%8F%AC%EB%A7%B7%EC%9D%B4-%EC%9E%AC%EC%83%9D%EB%90%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EA%B2%BD%EC%9A%B0
참고로, HLS(HTTP Live Streaming)의 약자로 Apple inc에 의하여 개발된 라이브 스트리밍 방식입니다. 그렇기 때문에 iOS 및 OS X 등의 환경과 Safari 브라우저 등에서 플레이가 가능한 이유입니다.

HTML5의 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);
}

https://hohoya33.tistory.com/120'