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에 각 세그먼트를 추가하여 오디오 또는 동영상 요소에 '스트리밍'됩니다. 이 예에서는 서버에서 동영상을 가져온 다음 파일 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에 의해 수정되었을 수 있음)는 세그먼트가 추가된 순서와 관계없이 재생 순서를 결정합니다. - 시퀀스: 미디어 타임라인에 버퍼링된 세그먼트의 순서는 세그먼트가
SourceBuffer에 추가되는 순서에 따라 결정됩니다.
미디어 세그먼트가 SourceBuffer에 추가될 때 바이트 스트림 데이터에서 파싱된 타임스탬프가 있는 경우 SourceBuffer의 mode 속성이 세그먼트로 설정됩니다. 그렇지 않으면 mode이 sequence로 설정됩니다. 타임스탬프는 선택사항이 아닙니다. 대부분의 스트림 유형에는 반드시 존재해야 하며 다른 경우에는 존재할 수 없습니다. 대역 내 타임스탬프는 이러한 타임스탬프가 포함된 스트림 유형에 고유합니다.
mode 속성을 설정하는 것은 선택사항입니다. 타임스탬프가 포함되지 않은 스트림 (오디오/mpeg 및 오디오/aac)의 경우 mode는 세그먼트에서 시퀀스로만 변경할 수 있습니다. mode를 시퀀스에서 세그먼트로 변경하려고 하면 오류가 발생합니다. 타임스탬프가 있는 스트림의 경우 세그먼트와 시퀀스 간에 전환할 수 있지만 실제로는 바람직하지 않거나 이해하기 어렵거나 예측하기 어려운 동작을 생성할 수 있습니다.
모든 스트림 유형에서 값을 세그먼트에서 시퀀스로 변경할 수 있습니다. 즉, 세그먼트가 추가된 순서대로 재생되며 이에 따라 새 타임스탬프가 생성됩니다.
sourceBuffer.mode = 'sequence';
mode 값을 sequence로 설정할 수 있으면 미디어 세그먼트 타임스탬프가 중단되었는지 (예: 동영상 다중화 관련 문제가 있거나 어떤 이유로든 불연속 세그먼트가 추가된 경우)에 관계없이 연속 미디어 재생이 보장됩니다. 올바른 스트림 메타데이터를 사용할 수 있는 경우 앱이 timestampOffset로 폴리필하여 연속 재생을 보장할 수 있지만, 시퀀스 모드를 사용하면 프로세스가 간단해지고 오류 발생 가능성이 줄어듭니다.
MSE 앱 및 데모
다음은 SourceBuffer.mode 조작 없이 작동 중인 MSE를 보여줍니다.
- 미디어 소스 API
- Shaka Player: MSE를 사용하여 Shaka JavaScript 라이브러리로 DASH를 구현하는 동영상 플레이어 데모
브라우저 지원
- 기본적으로 Chrome 50 이상
- Firefox의 경우 MDN에서 자세한 내용을 확인하세요.