MediaSource API는 HTMLMediaElement
를 확장하여 JavaScript가 재생을 위한 미디어 스트림을 생성할 수 있도록 합니다. JavaScript가 스트림을 생성하도록 허용하면 적응형 스트리밍 및 타임시프트 라이브 스트림과 같은 다양한 사용 사례를 지원할 수 있습니다.
다음은 API의 간단한 데모 및 사용 예입니다.
const NUM_CHUNKS = 5;
var video = document.querySelector('video');
video.src = video.webkitMediaSourceURL;
video.addEventListener('webkitsourceopen', function(e) {
var chunkSize = Math.ceil(file.size / NUM_CHUNKS);
// Slice the video into NUM_CHUNKS and append each to the media element.
for (var i = 0; i < NUM_CHUNKS; ++i) {
var startByte = chunkSize * i;
// file is a video file.
var chunk = file.slice(startByte, startByte + chunkSize);
var reader = new FileReader();
reader.onload = (function(idx) {
return function(e) {
video.webkitSourceAppend(new Uint8Array(e.target.result));
logger.log('appending chunk:' + idx);
if (idx == NUM_CHUNKS - 1) {
video.webkitSourceEndOfStream(HTMLMediaElement.EOS_NO_ERROR);
}
};
})(i);
reader.readAsArrayBuffer(chunk);
}
}, false);
이 예에서는 File API를 사용하여 .webm 동영상을 5개의 청크로 분할합니다. 그런 다음 MediaSource API를 사용하여 각 청크를 요소에 추가하여 전체 영화가 <video>
태그로 '스트리밍'됩니다.
API에 대해 자세히 알아보려면 사양을 참고하세요.
지원: 현재 MediaSource API는 --enable-media-source
플래그가 설정되어 있거나 about:flags
를 통해 사용 설정된 Chrome 개발자 채널 17 이상에서만 사용할 수 있습니다.