API แหล่งที่มาของสื่อ - ช่วยให้การเล่นส่วนต่างๆ ของสื่อเป็นไปอย่างราบรื่นตามลำดับการต่อท้าย

Sam Dutton

องค์ประกอบเสียงและวิดีโอ HTML ช่วยให้คุณโหลด ถอดรหัส และเล่นสื่อได้ง่ายๆ เพียงระบุ URL ของ src

    <video src='foo.webm'></video>

ซึ่งใช้ได้ผลดีใน Use Case ง่ายๆ แต่สำหรับเทคนิคต่างๆ เช่น สตรีมมิงแบบปรับเปลี่ยนได้ Media Source Extensions API (MSE) จะให้คุณควบคุมได้มากขึ้น MSE ช่วยให้สร้างสตรีมใน JavaScript จากส่วนของเสียงหรือวิดีโอได้

คุณลองใช้ MSE ได้ที่ simpl.info/mse

ภาพหน้าจอของวิดีโอที่เล่นโดยใช้ MSE API

โค้ดด้านล่างนี้มาจากตัวอย่างนั้น

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 เป็น segments มิเช่นนั้น ระบบจะตั้งค่า mode เป็น sequence โปรดทราบว่าการประทับเวลาไม่ใช่ตัวเลือก: การประทับเวลาต้องมีอยู่ในสตรีมประเภทส่วนใหญ่ และต้องไม่มีอยู่ในสตรีมประเภทอื่นๆ การประทับเวลาในแบนด์เป็นลักษณะเฉพาะของสตรีมประเภทที่มีการประทับเวลา

คุณจะตั้งค่าแอตทริบิวต์ mode หรือไม่ก็ได้ สำหรับสตรีมที่ไม่มีการประทับเวลา (audio/mpeg และ audio/aac) mode จะเปลี่ยนจากกลุ่มเป็นลําดับได้เท่านั้น ระบบจะแสดงข้อผิดพลาดหากคุณพยายามเปลี่ยน mode จากลําดับเป็นกลุ่ม สําหรับสตรีมที่มีการประทับเวลา คุณสามารถสลับระหว่างกลุ่มกับลําดับได้ แต่ในทางปฏิบัติ การดำเนินการนี้อาจทำให้เกิดลักษณะการทำงานที่ไม่พึงประสงค์ เข้าใจยาก หรือคาดการณ์ได้ยาก

สําหรับสตรีมทุกประเภท คุณสามารถเปลี่ยนค่าจาก segments เป็น sequence ได้ ซึ่งหมายความว่าระบบจะเล่นกลุ่มตามลำดับที่เพิ่มเข้ามา และสร้างการประทับเวลาใหม่ตามลำดับต่อไปนี้

sourceBuffer.mode = 'sequence';

การตั้งค่า mode เป็น sequence จะช่วยให้การเล่นสื่อเป็นไปอย่างต่อเนื่อง ไม่ว่าการประทับเวลาของกลุ่มสื่อจะขาดตอนหรือไม่ เช่น หากมีปัญหาเกี่ยวกับการรวมวิดีโอ หรือหากมีการเพิ่มกลุ่มที่ขาดตอนต่อท้าย (ไม่ว่าจะด้วยเหตุผลใดก็ตาม) แอปอาจใช้ polyfill กับ timestampOffset เพื่อให้เล่นอย่างต่อเนื่องได้ หากมีข้อมูลเมตาสตรีมที่ถูกต้อง แต่โหมด sequence จะทำให้กระบวนการง่ายขึ้นและเกิดข้อผิดพลาดน้อยลง

แอปและเดโม MSE

ตัวอย่างต่อไปนี้แสดงการทำงานของ MSE แต่ไม่มีSourceBuffer.modeการปรับ

  • Media Source API
  • Shaka Player: โปรแกรมเล่นวิดีโอเดโมที่ใช้ MSE เพื่อติดตั้งใช้งาน DASH ด้วยไลบรารี JavaScript ของ Shaka

การสนับสนุนเบราว์เซอร์

  • Chrome 50 ขึ้นไปโดยค่าเริ่มต้น
  • สําหรับ Firefox โปรดดูรายละเอียดใน MDN

ข้อมูลจำเพาะ

ข้อมูล API