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);
ตัวอย่างนี้จะแบ่งวิดีโอ .webm เป็น 5 ชิ้นโดยใช้ File API จากนั้นระบบจะ "สตรีม" ภาพยนตร์ทั้งเรื่องไปยังแท็ก <video>
โดยต่อข้อมูลแต่ละส่วนต่อท้ายองค์ประกอบโดยใช้ MediaSource API
หากสนใจดูข้อมูลเพิ่มเติมเกี่ยวกับ API โปรดดูข้อกำหนด
การสนับสนุน: ปัจจุบัน MediaSource API พร้อมให้บริการใน Chrome Dev Channel 17 ขึ้นไปเท่านั้น โดยต้องตั้งค่า Flag --enable-media-source
หรือเปิดใช้ผ่าน about:flags