API Sumber Media - Secara otomatis memastikan pemutaran segmen media yang lancar dalam urutan penambahan

Sam Dutton

Elemen audio dan video HTML memungkinkan Anda memuat, mendekode, dan memutar media, cukup dengan memberikan URL src:

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

Hal tersebut berfungsi dengan baik dalam kasus penggunaan sederhana, tetapi untuk teknik seperti streaming adaptif, Media Source Extensions API (MSE) memberikan kontrol yang lebih besar. MSE memungkinkan streaming dibuat di JavaScript dari segmen audio atau video.

Anda dapat mencoba MSE di simpl.info/mse:

Screenshot video yang diputar menggunakan MSE API.

Kode di bawah ini berasal dari contoh tersebut.

MediaSource merepresentasikan sumber media untuk elemen audio atau video. Setelah objek MediaSource dibuat instance-nya dan peristiwa open-nya diaktifkan, SourceBuffer dapat ditambahkan ke objek tersebut. Buffer ini berfungsi sebagai buffer untuk segmen media:

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.
}

Segmen media 'di-streaming' ke elemen audio atau video dengan menambahkan setiap segmen ke SourceBuffer dengan appendBuffer(). Dalam contoh ini, video diambil dari server, lalu disimpan menggunakan 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);
    }
};

Menetapkan urutan pemutaran

Chrome 50 menambahkan dukungan tambahan ke atribut SourceBuffer mode, yang memungkinkan Anda menentukan bahwa segmen media diputar secara terus-menerus, dalam urutan yang ditambahkan, terlepas dari apakah segmen media awalnya memiliki stempel waktu yang tidak terputus.

Gunakan atribut mode untuk menentukan urutan pemutaran untuk segmen media. Properti ini memiliki salah satu dari dua nilai:

  • segments: Stempel waktu setiap segmen (yang mungkin telah diubah oleh timestampOffset) menentukan urutan pemutaran, terlepas dari urutan penambahan segmen.
  • sequence: Urutan segmen yang di-buffer di linimasa media ditentukan oleh urutan segmen yang ditambahkan ke SourceBuffer.

Jika segmen media memiliki stempel waktu yang diuraikan dari data aliran byte saat ditambahkan ke SourceBuffer, properti mode SourceBuffer akan ditetapkan ke segments. Jika tidak, mode akan ditetapkan ke urutan. Perhatikan bahwa stempel waktu tidak bersifat opsional: stempel waktu harus ada untuk sebagian besar jenis streaming, dan tidak boleh ada untuk jenis streaming lainnya: stempel waktu in-band merupakan bawaan dari jenis streaming yang berisinya.

Menyetel atribut mode bersifat opsional. Untuk streaming yang tidak berisi stempel waktu (audio/mpeg dan audio/aac), mode hanya dapat diubah dari segmen menjadi urutan: error akan ditampilkan jika Anda mencoba mengubah mode dari urutan menjadi segmen. Untuk streaming yang memiliki stempel waktu, Anda dapat beralih antara segmen dan urutan, meskipun dalam praktiknya yang mungkin akan menghasilkan perilaku yang tidak diinginkan, sulit dipahami, atau sulit diprediksi.

Untuk semua jenis aliran data, Anda dapat mengubah nilai dari segmen menjadi urutan. Artinya, segmen akan diputar kembali sesuai urutan penambahannya, dan stempel waktu baru akan dibuat sebagaimana mestinya:

sourceBuffer.mode = 'sequence';

Kemampuan untuk menetapkan nilai mode ke sequence memastikan pemutaran media yang berkelanjutan, terlepas dari apakah stempel waktu segmen media tidak berkelanjutan — misalnya, jika ada masalah dengan muxing video, atau jika (karena alasan apa pun) segmen yang tidak berkelanjutan ditambahkan. Aplikasi dapat melakukan polyfill dengan timestampOffset untuk memastikan pemutaran yang berkelanjutan, jika metadata streaming yang benar tersedia, tetapi mode sequence membuat prosesnya lebih sederhana dan tidak terlalu rentan terhadap error.

Aplikasi dan demo MSE

Ini menunjukkan cara kerja MSE, meskipun tanpa manipulasi SourceBuffer.mode:

Dukungan browser

  • Chrome 50 dan yang lebih baru secara default
  • Untuk Firefox, lihat MDN untuk mengetahui detailnya

Spesifikasi

Informasi API