멀티미디어
MSE
다른 이름: Media Source Extensions , MediaSource API
정의
Media Source Extensions. W3C 표준 JavaScript API. <video>/<audio> 태그에 동적으로 미디어 세그먼트를 공급. HLS/DASH 플레이어 구현 핵심 기술. SourceBuffer로 fMP4/WebM 청크 추가. ABR 로직을 JavaScript로 구현 가능
상세 설명
기술 스펙
- MediaSource 객체: SourceBuffer 컨테이너
- SourceBuffer: 미디어 세그먼트 버퍼, appendBuffer()로 데이터 추가
- 지원 포맷: fMP4(ISO BMFF), WebM
- Codec String: codecs="avc1.64001f,mp4a.40.2" 등으로 명시
- BufferedTimeRanges: 버퍼링된 구간 확인
- Remove(): 오래된 버퍼 제거로 메모리 관리
- Timestampoffset: 세그먼트 타임스탬프 조정
실무 활용
- HLS.js, dash.js, Shaka Player: MSE 기반 ABR 플레이어
- YouTube, Netflix 웹 플레이어: 커스텀 MSE 구현
- DRM: EME(Encrypted Media Extensions)와 결합
장점
- 적응형 스트리밍: JavaScript로 ABR 로직 완전 제어
- 포맷 유연성: fMP4, WebM 동적 전환
- 브라우저 네이티브: 플러그인 불필요
단점 및 제약
- iOS Safari 제한: HLS 네이티브 우선, MSE는 iPadOS 13+만 제한 지원
- 복잡도: 타이밍, 버퍼 관리 어려움
- 코덱 제한: 브라우저별 지원 코덱 상이 (Safari는 H.264만)
호환성
Chrome 23+, Firefox 42+, Edge 12+, Safari 8+ (macOS), iPadOS 13+ (제한)
표준 정보
표준화 기구: W3C
출시 연도: 2013년