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