소개
M2Live Cloud 비디오 서비스는 MP4 원본 하나만 있으면 브라우저에 맞는 최적 포맷으로 실시간 변환·전달합니다. 별도의 인코딩 서버나 변환 파이프라인 없이, URL 하나로 포맷 변환·구간 편집·프레임 캡쳐를 모두 처리할 수 있습니다.
m2.cs@winesoft.co.kr)에 문의하세요.기존 방식과 무엇이 다른가요?
기존 방식은 MP4, WebM, HLS 등 여러 포맷을 미리 인코딩해서 각각 저장해야 했습니다. M2Live Cloud는 원본 MP4 하나만 저장하면, 브라우저의 요청에 맞춰 실시간으로 변환하고 CDN에 자동 캐싱합니다.
- 업로드 시 MP4, WebM 등 여러 포맷을 별도로 인코딩
- 해상도별(720p, 1080p 등)로 파일을 각각 저장
- HTML
<source>태그로 브라우저별 분기를 직접 처리 - 별도 인코딩 서버·파이프라인·스토리지 운영 필요
- MP4 원본 파일 하나만 저장하면 끝
- 브라우저 지원 포맷을 자동 감지해서 변환
- 변환 결과는 CDN에 자동 캐싱 → 이후 요청은 즉시 응답
- 인코딩 서버·스토리지·파이프라인 운영 비용 없음
지원 기능 한눈에 보기
| 기능 | 상태 | 설명 |
|---|---|---|
| 자동 포맷 최적화 | 지원 | MP4 → WebM(VP9/AV1) 자동 변환. Chrome·Firefox·Edge에서 최대 60% 용량 절감 |
| 트랜스코딩 | 지원 | 프리셋(_1080p, _720p, _480p, _360p)으로 해상도·비트레이트 변환 |
| 구간편집 (Trim) | 지원 | 단일 구간 및 다구간 추출·병합 지원. 숏폼 제작에 유용 |
| 프레임 캡쳐 | 지원 | 특정 시간 지점의 프레임 또는 다구간 캡쳐. 이미지 서비스 연계 가능 |
| 비디오 분석 | 지원 | 재생 시간·해상도·코덱 등 메타정보를 JSON으로 반환 (간략/상세/SSIM) |
| HLS 스트리밍 | 준비중 | MP4 → HLS(.m3u8 + .ts) 변환, ABR 다중 해상도 지원 예정 |
| 워터마크 | 준비중 | 이미지·텍스트 워터마크 오버레이, 타임라인 구간 지정 예정 |
요청이 처리되는 흐름
Accept 헤더에 담아 보냅니다.On-the-fly 자동 최적화
URL에 아무 파라미터를 추가하지 않아도, 브라우저가 지원하는 가장 효율적인 비디오 포맷으로 자동 변환합니다. 콘솔에서 비디오 최적화를 활성화하거나 URL에 /optimize/를 추가하는 것만으로 바로 사용할 수 있습니다.
브라우저 · 디바이스별 자동 변환 결과
브라우저 환경에 따라 아래처럼 자동으로 최적 포맷이 선택됩니다.
| 브라우저 / 환경 | 자동 변환 결과 | 용량 절감 효과 | 지원 버전 |
|---|---|---|---|
| Chrome | WebM (VP9 또는 AV1) | 약 40~60% (H.264 대비) | VP9: Chrome 25+, AV1: Chrome 70+ |
| Edge | WebM (VP9 또는 AV1) | 약 40~60% | VP9: Edge 14+, AV1: Edge 18+ |
| Firefox | WebM (VP9 또는 AV1) | 약 40~60% | VP9: Firefox 28+, AV1: Firefox 67+ |
| Safari macOS | WebM (VP9) | 약 40~50% (H.264 대비) | Safari 16.4+ (macOS Ventura 이상) |
| Safari iOS / iPadOS | WebM (VP9) | 약 40~50% | iOS / iPadOS 17+ (Safari 17 이상) |
| Samsung Internet | WebM (VP9) | 약 40~50% | Samsung Internet 4+ |
| Android WebView | WebM (VP9) | 약 40~50% | Android 4.4+ |
- macOS Safari 16.4+: VP9 코덱 및 WebM 컨테이너를 공식 지원합니다. macOS Ventura(13) 이상에서 안정적으로 동작합니다.
- iOS / iPadOS 17+: Safari 17부터 VP9/WebM 재생을 정식 지원합니다. iOS 16 이하에서는 MP4(H.264)가 폴백으로 자동 제공됩니다.
- 구형 Safari (16.3 이하) / iOS 16 이하: WebM 미지원. M2Live Cloud가
Accept헤더를 분석해 자동으로 MP4(H.264)를 제공합니다. 개발자가 별도 분기 처리를 할 필요가 없습니다.
VP9 vs AV1 — 어떤 코덱이 사용되나요?
H.264 대비 약 40~50% 용량 절감. Chrome, Firefox, Edge뿐 아니라 Safari 16.4+(macOS) 및 iOS 17+에서도 지원됩니다.
VP9 대비 약 30% 추가 절감. Chrome 70+, Firefox 67+, Edge 18+ 이상에서 지원됩니다. 고해상도(4K) 영상에서 특히 효율적입니다.
콘솔에서 활성화하는 방법
서비스 설정 → 미디어 설정 → 비디오 탭에서 아래 토글을 켜면, URL 파라미터 없이도 모든 비디오 요청에 자동 최적화가 적용됩니다.
지원 포맷
M2Live Cloud는 주요 비디오 포맷을 입력과 출력 모두 지원합니다. 원본은 MP4(H.264)로 보관하는 것을 권장하며, 출력은 브라우저 환경에 따라 WebM(VP9/AV1) 또는 MP4로 자동 결정됩니다.
포맷별 특성 비교
| 포맷 | 파일 크기 (H.264 대비) | 브라우저 지원 | 권장 용도 |
|---|---|---|---|
| WebM (VP9) | 약 40~50% 절감 | Chrome 25+, Firefox 28+, Edge 14+, Samsung 4+ Safari 16.4+ (macOS Ventura↑), iOS/iPadOS 17+ | 대부분의 현대 브라우저 대상 스트리밍 |
| WebM (AV1) | 약 60% 절감 (H.264 대비) | Chrome 70+, Firefox 67+, Edge 18+ ※ Safari / iOS 미지원 | 최신 브라우저 대상 고효율 스트리밍 |
| MP4 (H.264) | 기준 (100%) | 모든 브라우저 (구형 Safari 16.3↓ / iOS 16↓ 폴백 포함) | 원본 보관 포맷, 구형 환경 폴백 |
| MP4 (H.265 / HEVC) | 약 50% 절감 | Safari 11+ (macOS/iOS), Edge 일부 | 입력 지원. 출력은 현재 미지원 |
포맷 가이드
URL기반 변환
파일 경로 뒤에 c_xcdr 키워드와 변환 명령어를 추가하면, 비디오를 원하는 대로 가공할 수 있습니다. 서버 코드 변경 없이 URL 하나로 포맷 변환·구간 편집·프레임 캡쳐 등을 자유롭게 처리할 수 있습니다.
URL 구조
https://cdn.myservice.com/path/to/video.mp4/c_xcdr/[명령어]/[파라미터]c_xcdr)는 파일 경로 뒤에 붙습니다. 기존 파일 URL을 그대로 두고 끝에 변환 옵션을 추가하는 방식입니다.사용 가능한 명령어 목록
| 명령어 | 하는 일 | 주요 파라미터 | 상태 |
|---|---|---|---|
/preset/ | 지정 프리셋으로 트랜스코딩 (_1080p, _720p, _480p, _360p) | faststart | 지원 |
/trim/ | 특정 구간 추출. 단일·다구간 모두 지원 | HH:mm:ss 범위 표기 | 지원 |
/capture/ | 특정 시간 지점의 프레임을 이미지로 추출. 이미지 서비스 연계 가능 | ts, format, interval | 지원 |
/analyze/ | 재생시간·해상도·코덱 등 메타정보를 JSON으로 반환 | src, srcd, ssim | 지원 |
/hls/ | MP4 → HLS(.m3u8 + .ts) 변환, ABR 스트리밍 | — | 준비중 |
/watermark/ | 이미지·텍스트 워터마크 오버레이 | — | 준비중 |
c_xcdr는 M2Live Cloud가 비디오 변환 요청을 인식하는 고정 키워드입니다. 이 값을 변경하면 기존에 CDN에 캐싱된 모든 비디오 URL이 한꺼번에 무효화됩니다. 변경이 꼭 필요하다면 반드시 기술지원팀에 먼저 문의하세요.트랜스코딩
preset 명령어를 사용하면 비디오를 지정된 프리셋으로 실시간 트랜스코딩합니다. 트랜스코딩 후 메타데이터(moov atom)를 파일 맨 앞으로 배치해 재생 시작 속도를 최적화합니다.
m2.cs@winesoft.co.kr)에 별도 문의하세요.URL 예시
프리셋 상세
- 해상도
- 1920 × 1080
- 코덱
- mp4 / h.264 / aac
- 비트레이트
- 5,400 kbps
- 해상도
- 1280 × 720
- 코덱
- mp4 / h.264 / aac
- 비트레이트
- 2,400 kbps
- 해상도
- 854 × 480
- 코덱
- mp4 / h.264 / aac
- 비트레이트
- 1,200 kbps
- 해상도
- 640 × 360
- 코덱
- mp4 / h.264 / aac
- 비트레이트
- 720 kbps
옵션
| 옵션 | 기본값 | 설명 |
|---|---|---|
faststart | true | 트랜스코딩 후 메타데이터(moov atom)를 파일 맨 앞에 배치합니다. 스트리밍 재생 시작 속도를 개선합니다. 맨 뒤에 위치시키려면 faststart/false로 명시합니다. |
# 1080p 프리셋으로 트랜스코딩
https://example.com/video.mp4/c_xcdr/preset/_1080p
# 720p 프리셋으로 트랜스코딩
https://example.com/video.mp4/c_xcdr/preset/_720p
# faststart 비활성화 (메타데이터를 파일 끝에 배치)
https://example.com/video.mp4/c_xcdr/preset/_1080p/faststart/false구간편집 (Trim)
trim 명령어를 사용하면 비디오에서 원하는 구간만 추출할 수 있습니다. HH:mm:ss 형식으로 시작~종료 시간을 지정하며, 다구간 추출·병합도 지원합니다. 트랜스코딩과 결합해 숏폼 제작에 유용합니다.
시간 형식
| 형식 | 예시 | 설명 |
|---|---|---|
HH:mm:ss | 01:00:05 | 시:분:초 형식 (1시간 0분 5초) |
mm:ss | 03:15 | 분:초 형식 (3분 15초) |
ss | 5 | 초 단위 숫자만 입력 |
시작-종료 | 5-10 | 구간 지정. -로 시작~종료 구분 |
-종료 | -01:30 | 처음부터 지정 시간까지 |
시작- | 1:15:30- | 지정 시간부터 끝까지 |
URL 예시
# 1시간 0분 5초 ~ 1시간 1분 5초 구간 추출
https://example.com/video.mp4/c_xcdr/trim/01:00:05-01:01:05
# 처음부터 1분 30초까지
https://example.com/video.mp4/c_xcdr/trim/-01:30
# 1시간 15분 30초부터 끝까지
https://example.com/video.mp4/c_xcdr/trim/1:15:30-
# 1분 20초~1분 30초, 3분 57초~4분 28초 두 구간 병합
https://example.com/video.mp4/c_xcdr/trim/01:20-01:30,03:57-04:28- 미리보기 클립:
-00:30— 처음 30초를 미리보기로 제공 - 하이라이트 추출: 특정 장면 구간만 잘라내어 SNS 공유용 숏클립 생성
- 챕터 분리: 긴 강의 영상을 챕터별로 나눠 각 URL로 제공
- 다구간 병합: 광고 구간을 제외한 본편 구간들만 하나로 이어 제공
프레임 캡쳐
capture 명령어를 사용하면 비디오의 특정 시간 지점에서 프레임을 이미지로 추출합니다. 단일 캡쳐와 다구간 캡쳐를 모두 지원하며, 캡쳐된 이미지는 이미지 서비스와 연계해 추가 가공도 가능합니다.
옵션
| 옵션 | 기본값 | 설명 |
|---|---|---|
ts=시간 | — | 캡쳐할 시간 지점. HH:mm:ss.SSS 또는 축약형 ss.SSS 형식 지원. 콤마(,)로 구분해 다구간 캡쳐 가능 |
format=포맷 | webp | 출력 이미지 포맷. webp(기본값), jpg, png, gif, avif, mp4 중 선택 |
interval=초 | — | 다구간 캡쳐 시 화면 전환 간격 (초 단위) |
;)으로 구분합니다. 예: ts=10.3;format=webp;interval=3URL 예시
이미지 서비스 연계
캡쳐된 이미지는 이미지 서비스(c_hdims)와 연계해 리사이즈·포맷 변환 등 추가 가공이 가능합니다.
# 10초 지점 캡쳐 후 640x480으로 리사이즈
https://example.com/video.mp4/c_xcdr/capture/ts=10/c_hdims/resize/640x480<img> 태그의 src로 사용할 수 있으며, 이미지 서비스와 연계해 원하는 크기로 리사이즈도 가능합니다.
<img src="https://example.com/videos/product-tour.mp4/c_xcdr/capture/ts=3"
alt="영상 썸네일" loading="lazy">ts값이 비디오의 총 재생 시간을 초과한 경우- 지정한 시간 지점이 검은 화면 구간인 경우 (예: 인트로 페이드인)
analyze/src로 원본의 duration을 먼저 확인하고, 다른 시간 지점으로 조정해보세요.
HLS (HTTP Live Streaming)
출시 예정 기능
| 기능 | 설명 |
|---|---|
| MP4 → HLS 변환 | MP4 원본을 HLS 포맷(.m3u8 매니페스트 + .ts 세그먼트)으로 On-the-fly 변환 |
| ABR (Adaptive Bitrate) | 네트워크 속도에 따라 자동으로 화질을 조정하는 다중 해상도 스트림 생성 |
| 세그먼트 길이 조정 | 각 .ts 세그먼트의 길이를 초 단위로 지정 가능 |
| AES-128 암호화 | 콘텐츠 보호를 위한 세그먼트 단위 암호화 지원 예정 |
HLS란 무엇인가요?
HLS(HTTP Live Streaming)는 Apple이 개발한 비디오 스트리밍 프로토콜입니다. 비디오를 짧은 세그먼트(.ts 파일)로 분할하고, 매니페스트 파일(.m3u8)로 목록을 관리합니다. 네트워크 상태에 따라 화질을 자동으로 전환하는 ABR을 지원하여, 버퍼링 없이 안정적인 스트리밍을 제공합니다.
세그먼트 목록과 재생 순서를 담고 있는 텍스트 파일입니다. 플레이어는 이 파일을 먼저 요청해 전체 스트림 구조를 파악합니다.
실제 비디오 데이터가 담긴 파일입니다. 보통 2~10초 단위로 분할되며, CDN에서 각 세그먼트를 독립적으로 캐싱합니다.
네트워크 속도가 느리면 낮은 화질로, 빠르면 높은 화질로 자동 전환합니다. 끊김 없는 시청 경험을 제공합니다.
각 .ts 세그먼트를 암호화해 무단 다운로드·배포를 방지합니다. 키는 별도 키 서버를 통해 관리됩니다.
워터마크
출시 예정 기능
| 기능 | 설명 |
|---|---|
| 이미지 워터마크 | 로고·이미지를 비디오 위에 오버레이. 위치·크기·투명도(Opacity) 조절 가능 |
| 텍스트 워터마크 | 사용자 ID, 저작권 문구 등 텍스트를 비디오 위에 삽입. 폰트·크기·색상 지정 가능 |
| 타임라인 구간 지정 | 전체 재생 구간이 아닌 특정 시간 구간에만 워터마크 적용 |
| 동적 텍스트 | 사용자 이메일·ID 등 동적 값을 워터마크로 삽입. 불법 유포 출처 추적에 활용 |
분석 (Analyze)
analyze 명령어를 사용하면 비디오의 메타정보를 JSON 형태로 받아볼 수 있습니다. 간략 정보(src), 상세 정보(srcd), 원본과의 유사도 비교(ssim) 세 가지 명령어를 제공합니다.
c_xcdr가 아닌 c_hdims 키워드로 호출합니다.예:
https://example.com/sample.mp4/c_hdims/analyze/src명령어 종류
| 명령어 | 설명 |
|---|---|
analyze/src | 비디오 분석정보를 간략히 제공합니다. 포맷, 재생시간, 해상도, 코덱 등 핵심 정보를 확인할 때 사용합니다. |
analyze/srcd | 비디오 분석정보를 상세히 제공합니다. 모든 스트림(오디오·비디오)의 전체 메타데이터를 포함합니다. |
analyze/ssim | 원본과 변환된 비디오의 유사도(SSIM)를 비교합니다. 변환 품질 검증에 활용합니다. |
analyze/src — 간략 정보
{
"enable": true,
"url": "/video.mp4",
"result": {
"source": {
"size": 6238713,
"format": "mp4",
"duration": 15.062,
"video": {
"codec_name": "h264",
"width": 1920,
"height": 1080
},
"audio": {
"codec_name": "aac"
}
},
"elapsed": {
"init": 2,
"complete": 14
},
"function": {
"keyword": "xcdr"
}
}
}응답 필드 설명 (analyze/src)
| 필드 | 타입 | 설명 |
|---|---|---|
enable | boolean | 트랜스코더 모듈에 적재·처리 가능하면 true, 불가하면 false |
url | 문자열 | 원본 URL |
result.source.size | 정수 (bytes) | 파일 용량 |
result.source.format | 문자열 | 컨테이너 포맷 (mp4, webm, flv, ts 등) |
result.source.duration | 숫자 (초) | 재생 시간. 소수점 3자리까지 표시 |
result.source.video.codec_name | 문자열 | 비디오 코덱. 비디오가 없으면 null |
result.source.video.width | 정수 (px) | 가로 해상도 |
result.source.video.height | 정수 (px) | 세로 해상도 |
result.source.audio.codec_name | 문자열 | 오디오 코덱. 오디오가 없으면 null |
result.elapsed.init | 정수 (ms) | 호출 시점 ~ 원본 초기화까지 경과 시간 |
result.elapsed.complete | 정수 (ms) | 호출 시점 ~ 완료까지 경과 시간 |
analyze/srcd — 상세 정보
srcd는 모든 스트림의 전체 메타데이터를 반환합니다. result.source.streams 배열에 오디오·비디오 각 스트림의 코덱, 비트레이트, 프레임 수, 색공간, 샘플링 정보 등 상세 데이터가 포함됩니다.
analyze/ssim — 유사도 비교
{
"enable": true,
"url": "/example.mp4",
"result": {
"ssim": "0.971172",
"elapsed": {
"init": 5217,
"complete": 9559
}
}
}| 필드 | 타입 | 설명 |
|---|---|---|
enable | boolean | SSIM 비교가 정상 처리되면 true, 실패하면 false |
result.ssim | 숫자 (0~1) | 원본과 변환된 비디오의 유사도. 1이면 완전히 동일 |
- 트림 구간 설정 전:
analyze/src로duration을 확인해 종료 시간이 범위를 벗어나지 않도록 - 캡쳐 시간 설정 전:
duration을 확인해ts값이 유효 범위 내에 있는지 확인 - 디버깅: 원본 파일의 코덱·해상도·포맷이 예상과 다를 때
- 변환 품질 검증: 트랜스코딩 후
analyze/ssim으로 원본 대비 화질 손실 수준 확인
설정
서비스 설정 → 미디어 설정 → 비디오 탭에서 On-the-fly 비디오 최적화를 관리합니다. 설정 변경은 이후 들어오는 새 요청부터 바로 적용됩니다. 이미 CDN에 캐싱된 비디오는 퍼지를 실행하기 전까지 기존 방식대로 제공됩니다.
설정 항목
| 설정 | 기본값 | 하는 일 | 변경 시 주의사항 |
|---|---|---|---|
| 비디오 최적화 활성화 | OFF | MP4를 브라우저 지원 여부에 따라 WebM(VP9/AV1)으로 자동 변환. Safari 16.4+(macOS) 및 iOS 17+에는 WebM(VP9) 제공. 구형 Safari/iOS에는 MP4 그대로 제공 | 활성화 시 기존 캐시와 새 포맷이 혼재할 수 있습니다. 변경 후 캐시 퍼지를 권장합니다 |
| 서비스 키워드 | c_xcdr | URL 변환 명령어 앞에 오는 고정 키워드 | 변경이 불가합니다. 절대 수정하지 마세요 |
c_xcdr를 변경하는 순간, CDN에 저장된 모든 변환 비디오의 캐시 URL이 한꺼번에 무효화됩니다. 이로 인해 원본 서버로 요청이 폭증하고, 서비스 응답 속도가 급격히 저하될 수 있습니다. 키워드 변경이 꼭 필요하다면 반드시 기술지원팀에 먼저 문의하세요.최적화를 켜기 전 vs 켠 후 비교
- 원본 MP4를 그대로 전달합니다
- 트랜스코딩이 필요하면
/c_xcdr/preset/_720p등을 직접 URL에 추가해야 합니다 - 모든 브라우저에 동일한 포맷이 제공됩니다
- Chrome·Firefox·Edge·Safari 16.4+(macOS)·iOS 17+에는 WebM(VP9), 구형 Safari/iOS에는 MP4를 자동 제공합니다
- 기존 URL을 그대로 사용해도 됩니다 (코드 변경 불필요)
- 포맷별로 독립 캐싱되어 각 브라우저에 최적 포맷이 제공됩니다
Best Practice
M2Live Cloud 비디오 서비스를 처음 도입하거나 더 효율적으로 사용하고 싶다면 아래 가이드를 참고하세요. 원본 관리부터 HTML 삽입 방법, 캐시 전략까지 실무에서 바로 활용할 수 있는 내용을 담았습니다.
원본·포맷 관리 전략
- 비디오 최적화 설정을 ON으로 활성화하세요. URL을 바꾸지 않아도 브라우저에 맞는 포맷이 자동으로 적용됩니다.
- 원본은 항상 고품질 MP4(H.264)로 보관하세요. On-the-fly 변환이 원본에서 최상의 결과를 만들어냅니다.
- 새 비디오를 업로드한 뒤
analyze/src로 메타정보를 먼저 확인하세요. 재생 시간, 코덱, 해상도를 파악하면 트림·캡쳐 파라미터 설정이 쉬워집니다. - 트랜스코딩 후 품질이 걱정된다면
analyze/ssim으로 원본 대비 유사도를 검증하세요. - 비디오 탐색(seek) 기능이 필요한 서비스라면 CDN 설정의 If-Range 헤더 처리를 활성화하세요.
- 원본을 직접 WebM으로 변환해서 업로드하지 마세요. 재변환 시 화질 손실이 누적됩니다.
- 3분 이상의 영상에 트랜스코딩을 무작정 적용하지 마세요. 기술지원팀에 먼저 문의하세요.
- URL에 타임스탬프나 무작위 파라미터를 추가하지 마세요. 캐시 히트율이 급감합니다.
- 트림 종료 시간을 원본 재생 시간보다 크게 설정하지 마세요.
analyze/src로 먼저 확인하세요.
상황별 권장 URL 패턴
| 상황 | 권장 URL 패턴 | 이유 |
|---|---|---|
| 일반 비디오 — 최적화만 원할 때 | 비디오 최적화 설정 ON + 기존 URL 그대로 | 코드 변경 없이 자동 최적화가 적용됩니다 |
| 1080p로 트랜스코딩 | /videos/video.mp4/c_xcdr/preset/_1080p | 고품질 고정 해상도가 필요할 때 |
| 모바일용 저용량 버전 | /videos/video.mp4/c_xcdr/preset/_480p | 480p + 1,200 kbps 프리셋. 모바일 데이터 절감 |
| 썸네일 이미지 생성 | /videos/video.mp4/c_xcdr/capture/ts=3 | 3초 지점 프레임을 WebP로 추출. CDN에 캐싱됩니다 |
| 미리보기 숏클립 제공 | /videos/video.mp4/c_xcdr/trim/-00:30 | 처음 30초만 추출. 페이지 로드 속도 개선에 효과적입니다 |
| 파일 업데이트 후 즉시 반영 | URL에 버전 파라미터 추가 video.mp4?v=2 | CDN 퍼지 없이 새 버전을 즉시 제공할 수 있습니다 |
HTML에 비디오 삽입하기
비디오 최적화 설정이 켜져 있다면 기존 <video> 태그를 그대로 사용해도 브라우저에 맞는 포맷이 자동으로 제공됩니다. Safari 16.4+(macOS) 및 iOS 17+에도 VP9/WebM이 자동으로 전달되며, 구형 환경에는 MP4가 폴백됩니다.
<!-- 비디오 최적화 ON 상태라면 이것만으로 충분합니다.
Chrome/Firefox/Edge/Safari 16.4+/iOS 17+ → WebM(VP9)
구형 Safari / iOS 16↓ → MP4 자동 폴백 -->
<video
src="https://cdn.myservice.com/videos/intro.mp4"
controls
preload="metadata"
width="1280" height="720">
</video><!-- WebM 우선, MP4 폴백 (구형 Safari / iOS 16↓ 포함 전 브라우저 지원) -->
<video controls preload="metadata" width="1280" height="720">
<!-- Chrome / Firefox / Edge / Safari 16.4+ / iOS 17+: WebM(VP9) 우선 제공 -->
<source
src="https://cdn.myservice.com/videos/intro.mp4/c_xcdr/preset/_1080p"
type="video/mp4">
<!-- 구형 Safari(16.3↓) / iOS 16↓: 원본 MP4(H.264) 폴백 -->
<source
src="https://cdn.myservice.com/videos/intro.mp4"
type="video/mp4">
<p>이 브라우저는 HTML5 비디오를 지원하지 않습니다.</p>
</video>설정 경로: CDN 설정 → 콘텐츠 처리 → If-Range 헤더 처리 (활성화 권장)
트러블슈팅
비디오 관련 문제가 생겼을 때 아래 체크리스트를 순서대로 확인해보세요. 직접 해결이 어렵다면 m2.cs@winesoft.co.kr로 문의해 주세요.
증상별 원인과 해결 방법
| 이런 문제가 있다면 | 원인 | 해결 방법 |
|---|---|---|
| 비디오가 아예 재생되지 않음 | URL 경로 오류, 원본 서버 장애, c_xcdr 오타, 코덱 미지원 | URL 진단에서 응답 코드 확인. c_xcdr 철자 확인. analyze/src로 코덱 확인 |
| Safari(macOS 16.3↓)에서 재생이 안 됨 | 구형 Safari는 WebM 미지원 | 자동 최적화 설정을 사용하면 구형 Safari에 MP4가 자동 제공됩니다. |
| iOS 16 이하에서 재생이 안 됨 | iOS 16 이하 Safari는 WebM 미지원 | 자동 최적화 설정 사용 시 iOS 16 이하에 MP4가 자동 제공됩니다. iOS 17+에서는 VP9/WebM이 정상 재생됩니다. |
| 트랜스코딩이 완료되지 않음 | 영상 길이가 3분을 초과하는 경우 | 현재 실시간 트랜스코딩은 숏폼·리뷰 용도로 한정됩니다. 3분 이상 영상은 기술지원팀에 문의하세요. |
| 비디오 탐색(seek)이 매우 느림 | CDN의 Range Request 처리가 비활성화되어 있음 | CDN 설정 → 콘텐츠 처리 → If-Range 헤더 처리를 활성화하세요. |
| 트림 구간이 맞지 않음 | 시간 형식 오류 또는 종료 시간이 재생 시간 초과 | analyze/src로 duration을 먼저 확인하고 파라미터를 다시 설정하세요. |
| 캡쳐 이미지가 검게 나옴 | ts 값이 재생 시간을 초과하거나 인트로·아웃트로 검은 화면 구간 | analyze/src로 duration 확인 후 ts 값을 조정하세요. |
| 캐시 히트율이 낮음 | URL 파라미터가 무작위로 붙거나 TTL이 너무 짧음 | URL 파라미터를 표준화하고, CDN TTL 설정을 점검하세요. |
| 변환 후 오디오가 없음 | 원본 오디오 코덱이 출력 포맷과 호환되지 않음 | analyze/src로 audio.codec_name을 확인하세요. 기술지원팀에 문의를 권장합니다. |
| 502 / 504 오류 발생 | 원본 서버 응답이 너무 느리거나 타임아웃 발생 | 원본 서버 상태를 확인하고, Origin Pull 응답 시간을 점검하세요. |
문제를 빠르게 찾는 5단계 체크리스트
/videos/video.mp4/c_hdims/analyze/src로 원본의 재생 시간·코덱·해상도를 확인합니다. 트림·캡쳐 파라미터 설정 전 반드시 확인하세요.# 응답 헤더 전체 확인 (Content-Type, Cache-Control, X-Cache 등)
curl -I "https://example.com/videos/intro.mp4/c_xcdr/preset/_720p"
# 비디오 메타정보 JSON으로 확인 (재생시간, 코덱, 해상도 등)
curl "https://example.com/videos/intro.mp4/c_hdims/analyze/src"
# 상세 메타정보 확인 (모든 스트림 정보 포함)
curl "https://example.com/videos/intro.mp4/c_hdims/analyze/srcd"
# Range Request 지원 여부 확인
curl -H "Range: bytes=0-1023" -I "https://example.com/videos/intro.mp4"- 문제가 발생하는 전체 비디오 URL
analyze/src결과 JSON (재생시간, 코덱, 해상도)- 문제가 발생하는 브라우저·OS 환경 (Safari 버전, iOS 버전 포함)
- 최근에 변경한 설정 내역 (미디어 설정, 퍼지 실행 여부 등)