HTML5의 Video태그에서 m3u8 포맷이 재생되지 않는 경우

Last Modified : 2017-04-21 / Created : 2017-04-21

20,040
View Count

주소 복사하기

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>

참고로, HLS(HTTP Live Streaming)의 약자로 Apple inc에 의하여 개발된 라이브 스트리밍 방식입니다. 그렇기 때문에 iOS 및 OS X 등의 환경과 Safari 브라우저 등에서 플레이가 가능한 이유입니다.

아래의 글도 찾고 계시지 않나요?

Git 이전에 커밋한 내용과 파일 내용을 비교하는 방법은?

CSS preprocessor LESS의 자주 사용되는 문법 및 방법은?