องค์ประกอบเสียงและวิดีโอ HTML ช่วยให้คุณโหลด ถอดรหัส และเล่นสื่อได้ง่ายๆ เพียงระบุ URL ของ src
<video src='foo.webm'></video>
ซึ่งใช้ได้ผลดีใน Use Case ง่ายๆ แต่สำหรับเทคนิคต่างๆ เช่น สตรีมมิงแบบปรับเปลี่ยนได้ Media Source Extensions API (MSE) จะให้คุณควบคุมได้มากขึ้น MSE ช่วยให้สตรีมสร้างจาก JavaScript จากส่วนของเสียงหรือวิดีโอได้
คุณลองใช้ MSE ได้ที่ simpl.info/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.
}
ระบบจะ "สตรีม" แต่ละกลุ่มสื่อไปยังองค์ประกอบเสียงหรือวิดีโอด้วยการเพิ่มแต่ละกลุ่มลงใน SourceBuffer ด้วย appendBuffer() ในตัวอย่างนี้ ระบบจะดึงข้อมูลวิดีโอจากเซิร์ฟเวอร์แล้วจัดเก็บโดยใช้ 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 เพื่อระบุลำดับการเล่นของกลุ่มสื่อ โดยจะมีค่าอย่างใดอย่างหนึ่งต่อไปนี้
- segments: การประทับเวลาของแต่ละกลุ่ม (ซึ่งอาจแก้ไขโดย
timestampOffset) จะกำหนดลำดับการเล่น ไม่ว่าลำดับของกลุ่มที่จะเพิ่มต่อท้ายจะเป็นแบบใดก็ตาม - sequence: ลําดับของกลุ่มที่บัฟเฟอร์ในไทม์ไลน์สื่อจะกําหนดโดยลําดับที่เพิ่มกลุ่มต่อท้าย
SourceBuffer
หากกลุ่มสื่อมีการประทับเวลาที่แยกวิเคราะห์จากข้อมูลสตรีมไบต์เมื่อต่อท้าย SourceBuffer ระบบจะตั้งค่าพร็อพเพอร์ตี้ mode ของ SourceBuffer เป็นกลุ่ม มิเช่นนั้น ระบบจะตั้งค่า mode เป็น sequence โปรดทราบว่าการประทับเวลาไม่ใช่ตัวเลือก: การประทับเวลาต้องมีอยู่ในสตรีมประเภทส่วนใหญ่ และต้องไม่มีอยู่ในสตรีมประเภทอื่นๆ การประทับเวลาในแบนด์เป็นลักษณะเฉพาะของสตรีมประเภทที่มีการประทับเวลา
คุณจะตั้งค่าแอตทริบิวต์ mode หรือไม่ก็ได้ สำหรับสตรีมที่ไม่มีการประทับเวลา (เสียง/mpeg และเสียง/aac) mode จะเปลี่ยนได้เฉพาะจากกลุ่มเป็นลำดับเท่านั้น ระบบจะแสดงข้อผิดพลาดหากคุณพยายามเปลี่ยน mode จากลำดับเป็นกลุ่ม สำหรับสตรีมที่มีการประทับเวลา คุณสลับไปมาระหว่างกลุ่มและลำดับได้ แม้ว่าในทางปฏิบัติแล้วอาจทำให้เกิดพฤติกรรมที่ไม่เป็นที่ต้องการ เข้าใจยาก หรือคาดการณ์ได้ยาก
สำหรับสตรีมทุกประเภท คุณเปลี่ยนค่าจากกลุ่มเป็นลำดับได้ ซึ่งหมายความว่าระบบจะเล่นกลุ่มตามลำดับที่เพิ่มเข้ามา และสร้างการประทับเวลาใหม่ตามลำดับต่อไปนี้
sourceBuffer.mode = 'sequence';
การตั้งค่า mode เป็น sequence จะช่วยให้การเล่นสื่อเป็นไปอย่างต่อเนื่อง ไม่ว่าการประทับเวลาของกลุ่มสื่อจะขาดตอนหรือไม่ เช่น หากมีปัญหาเกี่ยวกับการรวมวิดีโอ หรือหากมีการต่อกลุ่มที่ขาดตอนไว้ท้าย (ไม่ว่าจะด้วยเหตุผลใดก็ตาม) แอปอาจใช้ polyfill กับ timestampOffset เพื่อให้เล่นอย่างต่อเนื่องได้ หากมีข้อมูลเมตาสตรีมที่ถูกต้อง แต่โหมด sequence จะทำให้กระบวนการง่ายขึ้นและเกิดข้อผิดพลาดน้อยลง
แอป MSE และการสาธิต
รายการเหล่านี้แสดง MSE ขณะใช้งานจริง แต่ไม่มีการปรับแต่ง SourceBuffer.mode
- API แหล่งที่มาของสื่อ
- Shaka Player: การสาธิตโปรแกรมเล่นวิดีโอที่ใช้ MSE ในการใช้งาน DASH กับไลบรารี JavaScript ของ Shaka
การสนับสนุนเบราว์เซอร์
- Chrome 50 ขึ้นไปโดยค่าเริ่มต้น
- สำหรับ Firefox โปรดดูรายละเอียดที่ MDN