HTML 오디오 및 동영상 요소를 사용하면 src URL을 제공하기만 하면 미디어를 로드, 디코딩, 재생할 수 있습니다.
<video src='foo.webm'></video>
이는 간단한 사용 사례에서는 잘 작동하지만 적응형 스트리밍과 같은 기법의 경우 Media Source Extensions API(MSE)를 사용하면 더 세부적으로 제어할 수 있습니다. MSE를 사용하면 오디오 또는 동영상 세그먼트에서 JavaScript로 스트림을 빌드할 수 있습니다.
simpl.info/mse에서 MSE를 사용해 볼 수 있습니다.
아래 코드는 이 예시에서 가져온 것입니다.
MediaSource는 오디오 또는 동영상 요소의 미디어 소스를 나타냅니다. MediaSource 객체가 인스턴스화되고 open 이벤트가 실행되면 SourceBuffer를 추가할 수 있습니다. 다음은 미디어 세그먼트의 버퍼 역할을 합니다.
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
var sourceBuffer =
mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
// Get video segments and append them to sourceBuffer.
}
미디어 세그먼트는 appendBuffer()를 사용하여 각 세그먼트를 SourceBuffer에 추가하여 오디오 또는 동영상 요소로 '스트리밍'됩니다. 이 예에서는 동영상이 서버에서 가져온 후 File API를 사용하여 저장됩니다.
reader.onload = function (e) {
sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
if (i === NUM_CHUNKS - 1) {
mediaSource.endOfStream();
} else {
if (video.paused) {
// start playing after first chunk is appended
video.play();
}
readChunk(++i);
}
};
재생 순서 설정
Chrome 50에서는 SourceBuffer mode 속성에 대한 추가 지원을 추가하여 미디어 세그먼트가 처음에 연속되지 않은 타임스탬프를 보유했는지와 관계없이 미디어 세그먼트가 추가된 순서대로 연속적으로 재생되도록 지정할 수 있습니다.
mode 속성을 사용하여 미디어 세그먼트의 재생 순서를 지정합니다. 다음 두 값 중 하나를 갖습니다.
- 세그먼트: 각 세그먼트의 타임스탬프(
timestampOffset로 수정되었을 수 있음)는 세그먼트가 추가된 순서와 관계없이 재생 순서를 결정합니다. - sequence: 미디어 타임라인에 버퍼링된 세그먼트의 순서는 세그먼트가
SourceBuffer에 추가된 순서에 따라 결정됩니다.
미디어 세그먼트가 SourceBuffer에 추가될 때 바이트 스트림 데이터에서 파싱된 타임스탬프가 있는 경우 SourceBuffer의 mode 속성이 segments로 설정됩니다. 그렇지 않으면 mode이 sequence로 설정됩니다. 타임스탬프는 선택사항이 아닙니다. 타임스탬프는 대부분의 스트림 유형에 있어야 하며 다른 스트림 유형에 있을 수 없습니다. 대역 타임스탬프는 타임스탬프를 포함하는 스트림 유형에 타고난 특성입니다.
mode 속성 설정은 선택사항입니다. 타임스탬프가 포함되지 않은 스트림(audio/mpeg 및 audio/aac)의 경우 mode는 segments에서 sequence로만 변경할 수 있습니다. mode를 sequence에서 segments로 변경하려고 하면 오류가 발생합니다. 타임스탬프가 있는 스트림의 경우 세그먼트와 시퀀스 간에 전환할 수 있지만 실제로는 바람직하지 않거나 이해하기 어렵거나 예측하기 어려운 동작이 발생할 수 있습니다.
모든 스트림 유형의 값을 세그먼트에서 시퀀스로 변경할 수 있습니다. 즉, 세그먼트는 추가된 순서대로 재생되고 이에 따라 새 타임스탬프가 생성됩니다.
sourceBuffer.mode = 'sequence';
mode 값을 sequence로 설정하면 미디어 세그먼트 타임스탬프가 비연속적인지와 관계없이 연속적인 미디어 재생이 보장됩니다. 예를 들어 동영상 뮤싱에 문제가 있거나 어떠한 이유로든 비연속 세그먼트가 추가된 경우에도 마찬가지입니다. 올바른 스트림 메타데이터를 사용할 수 있는 경우 앱이 timestampOffset로 폴리필하여 연속 재생을 보장할 수 있지만 시퀀스 모드를 사용하면 프로세스가 더 간단해지고 오류가 줄어듭니다.
MSE 앱 및 데모
다음은 SourceBuffer.mode 조작 없이 MSE가 작동하는 모습을 보여줍니다.
- Media Source API
- Shaka Player: MSE를 사용하여 Shaka JavaScript 라이브러리로 DASH를 구현하는 동영상 플레이어 데모
브라우저 지원
- 기본적으로 Chrome 50 이상
- Firefox의 경우 자세한 내용은 MDN을 참고하세요.