설치 없이 3분 만에 브라우저에서 M3U8 스트림 재생하기

목차

  1. 시작 전 확인 두 가지
  2. 스톱워치로 따라가는 재생 과정
  3. 내 페이지에 붙이기
  4. 멈췄을 때 손볼 세 곳

시작 전 확인 두 가지

이 과정에는 프로그램 설치도 확장 기능도 필요 없습니다. 준비물은 재생할 m3u8 주소와 브라우저뿐입니다. 다만 아래 두 가지를 먼저 짚고 넘어가면 시행착오가 눈에 띄게 줄어듭니다.

스톱워치로 따라가는 재생 과정

실제로 시간을 재면서 진행해 보겠습니다. 온라인 플레이어를 탭 하나 더 띄워 두고 시작하세요.

  1. 0~60초 · 주소 확보 — 영상 페이지에서 스트림 주소를 복사합니다. 주소가 숨겨져 있어 보이지 않는다면 개발자 도구를 이용하는 방법부터 익히는 편이 빠릅니다.
  2. 60~120초 · 붙여넣고 재생 — 입력창에 주소를 넣고 재생 버튼을 누릅니다. 플레이어가 재생 목록을 읽고 조각을 차례로 받으면 첫 프레임이 뜹니다. 입력창에는 데모용 주소가 이미 채워져 있어, 가진 주소가 없다면 그대로 눌러도 됩니다.
  3. 120~180초 · 동작 점검 — 진행 바를 앞뒤로 움직여 위치 이동이 되는지, 화질이 일정하게 유지되는지 확인합니다. 다시 보기(VOD)는 자유로운 이동이 되지만 라이브는 최근 구간만 움직일 수 있습니다.

내 페이지에 붙이기

게시물이나 문서 화면에서 같은 재생 환경을 제공하고 싶다면 iframe 한 줄이면 충분합니다:

<iframe src="https://m3u8.kixtools.com/player.html?url=스트림주소"
  width="100%" height="480" frameborder="0" allowfullscreen></iframe>

url 값만 실제 m3u8 주소로 바꾸고, 높이는 감싸는 레이아웃에 맞춰 조정하면 됩니다. 스크립트를 따로 불러오거나 라이브러리를 추가할 필요가 없습니다.

멈췄을 때 손볼 세 곳

  1. CORS — 콘솔에 교차 출처 오류가 뜨면 소스 서버가 외부 재생을 허용하지 않는 상태입니다. 브라우저에서 풀 수 있는 문제가 아니라 서버 응답 헤더를 고쳐야 합니다.
  2. 만료된 서명 — 주소에 token·sign 같은 쿼리가 붙어 있다면 유효 시간이 지났을 수 있습니다. 페이지를 새로 열어 최신 주소를 다시 따오세요.
  3. 혼합 콘텐츠 — https 페이지에서 http 스트림을 열면 브라우저가 차단합니다. https 주소의 스트림을 쓰거나 http 페이지에서 시험해 보세요.

주소를 찾는 요령은 튜토리얼 모음에서 단계별로 정리해 두었습니다. 화면은 뜨는데 자꾸 버벅인다면 원인별 점검 순서를 담은 버퍼링 체크리스트 글을 참고하고, 재생에서 한 단계 더 나아가 저장을 원한다면 M3U8→MP4 변환 도구가 이어받아 줍니다.