M3U8(HLS) 주소가 있는데 공식 사이트·블로그·문서에 넣어 재생하고 싶지만 백엔드는 만들기 싫고 플레이어도 처음부터 짜기 싫다면 꽤 흔한 상황입니다.
방법은 단순합니다. 브라우저에서 M3U8 임베드 코드 생성기 를 열고 스트림 URL을 붙여 넣고 자동 재생을 시도할지 정하면, 공유용 임베드 페이지 링크와 그대로 붙일 수 있는 iframe HTML 이 나옵니다.
글 순서는 이렇습니다. 아직 M3U8 링크가 없다면 2절에서 어디서 구하는지 알려 주고 별도 가이드로 연결합니다. 3절부터 는 생성기에 붙여 넣고 코드를 복사하는 과정이고, 마지막에 video_url, autoplay 같은 쿼리 를 정리합니다.
.m3u8 이 낯설다면 먼저 읽어 보세요: M3U8 파일이란.
1. 이런 분께 도움이 됩니다
이벤트 페이지에 라이브를 넣고 싶은 마케터, 스테이징용으로 맞는 iframe 이 필요한 개발자——결국 웹 페이지에 HLS 스트림을 넣는 것입니다. 생성기는 지금 M3U8(HLS) 만 지원합니다. 임베드 페이지 URL 과 iframe 은 같은 재생 페이지를 가리키니 상황에 맞게 하나만 복사하면 됩니다.
2. 아직 M3U8 주소가 없다면 먼저 구하기
많은 분이 여기서 막힙니다. 화면에서는 영상이 재생되는데 .m3u8 에 뭘 넣어야 할지 모른다. 임베드 도구는 직접 열 수 있는 M3U8 재생 목록 URL 이 필요하므로 페이지나 네트워크에서 꺼내야 합니다.
무료 Chrome 확장 프로그램 The Stream Detector 를 쓰는 방법이 흔합니다. 영상이 정상 재생되는 페이지에서 확장을 열면 HLS 주소가 보이고 골라 복사하면 됩니다. 대략적인 순서: Chrome 웹스토어에서 설치 → 도구 모음에 고정 → 영상 페이지로 돌아가기(필요하면 새로고침) → 배지나 목록을 따라 URL 복사.
설치 링크·캡처 단계·더블클릭 복사는 별도 글에 정리했습니다:
개발자 도구를 쓰려면 네트워크 탭에서 m3u8 또는 manifest 로 걸러 마스터 재생 목록 URL을 복사하면 됩니다. 조금 더 어렵지만 목표는 같습니다. 최종적으로 필요한 건 그 재생 목록의 https 주소입니다.
주소를 얻은 뒤 M3U8 온라인 플레이어에서 재생이 되는지, 임베드해도 되는지 확인한 다음 임베드 생성으로 넘어가세요.
3. 시작 전에 준비할 것
- 재생되는 M3U8 주소(가능하면
https://이며 웹에 올려도 되는 권한이 있을 것). 아직 찾는 법을 모르면 앞 절과 M3U8 주소를 찾는 가장 좋은 방법을 보세요. - 임베드 페이지를 열었을 때 자동 재생을 시도할지——켜면 링크에 해당 매개변수가 붙습니다. 실제로 자동 재생될지는 브라우저 정책에 따릅니다.
당장 내 스트림이 없어도 UI만 보려면 아래 공개 테스트 스트림을 쓸 수 있습니다:
https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8
4. 세 단계로 끝
1단계: 페이지를 열고 주소 붙여 넣기
- M3U8 임베드 코드 생성기 열기
- M3U8(HLS) URL 칸에 재생 목록 붙여 넣기
- 임베드 형식은 지금 M3U8(HLS) 만 있음(추가되면 여기서 선택)
2단계: 자동 재생 여부
임베드 페이지에서 자동 재생 시도를 켜면 생성된 링크에 autoplay=true 가 포함됩니다. 플레이어는 자동 시작을 시도하지만 소리 있는 자동 재생은 브라우저가 막는 경우가 많고 음소거나 사용자 클릭 후 재생이 더 안정적입니다.
3단계: 필요한 쪽 복사
두 블록이 있습니다.
- 임베드 페이지 URL: 채팅·메일·문서·CMS 링크 삽입용
- iframe HTML: 템플릿을 직접 수정해 화면을 넣을 때
헷갈리면 새 탭에서 미리보기로 확인한 뒤 본 환경에 복사하세요.
5. 링크에 붙는 매개변수(요약)
생성기는 선택 내용을 쿼리 문자열에 넣습니다. 재생과 관련해 주로 보는 것은 다음과 같습니다.
| 매개변수 | 의미 | 설명 |
|---|---|---|
video_url | 스트림 주소 | 주소 안의 &, ? 가 깨지지 않도록 URL 인코딩됩니다. |
autoplay | 자동 재생 시도 | true 는 「시도」이며 최종 여부는 브라우저가 결정합니다. |
형태 예(실제로 복사한 문자열을 기준으로 하세요):
https://m3u8player.app/ko/embed/m3u8/?video_url=…&autoplay=true
자동 재생을 끄면 보통 autoplay=true 는 붙지 않습니다.
6. 자주 걸리는 부분
- 저작권: 볼 수 있다고 공개 임베드가 항상 허용되는 것은 아닙니다.
- 도달 가능 여부: CORS·내부망만 되는 스트림이면 방문자도 재생할 수 없습니다. 페이지가 HTTPS 이면 스트림도 HTTPS 가 무난합니다.
- 자동 재생: 매개변수를 넣어도 항상 자동 재생되는 것은 아닙니다. 미리보기와 실제 기기에서 확인하세요.
- 형식: 이 생성기는 M3U8(HLS) 전용입니다. 일반 MP4 직링크는 이 흐름이 아닙니다.
7. 사이트 다른 페이지와 역할 나누기
브라우저에서 그냥 재생하고 화질을 바꾸려면 M3U8 온라인 플레이어.
세그먼트를 받아 저장하려면 M3U8 온라인 다운로더(합법적 이용은 본인 책임).
임베드 생성기는 링크와 iframe을 맞춰 주는 페이지입니다.
아직 M3U8 주소가 없다면 먼저 M3U8 주소를 찾는 가장 좋은 방법을 읽고 돌아오세요.
한 줄 요약
주소를 모르겠다 → M3U8 주소를 찾는 가장 좋은 방법을 보고 The Stream Detector나 네트워크 탭으로 URL을 구한 뒤 임베드 생성기를 연다 → M3U8 붙여 넣기 → 자동 재생 선택 → URL 또는 iframe 복사. video_url 과 선택적 autoplay=true 는 생성기가 조합합니다. 테스트 스트림으로 한번 돌려 본 뒤 내 주소로 바꾸면 수월합니다.
