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

Budiman

Elemen audio dan video HTML memungkinkan Anda memuat, mendekode, dan memutar media, hanya 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 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 mewakili sumber media untuk elemen audio atau video. Setelah objek MediaSource dibuat instance dan peristiwa open-nya telah diaktifkan, SourceBuffer dapat ditambahkan ke dalamnya. 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, sesuai urutan penambahannya, terlepas dari apakah segmen media awalnya memiliki stempel waktu yang terputus.

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

  • segmen: 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 penambahan segmen ke SourceBuffer.

Jika segmen media memiliki stempel waktu yang diuraikan dari data aliran byte saat ditambahkan ke SourceBuffer, properti mode dari SourceBuffer akan ditetapkan ke segmen. Jika tidak, mode akan ditetapkan ke urutan. Perlu diperhatikan bahwa stempel waktu bukanlah opsional: stempel waktu harus ada untuk sebagian besar jenis streaming, dan tidak dapat ada untuk jenis streaming lainnya: stempel waktu inband adalah bawaan untuk jenis streaming yang memuatnya.

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 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 sesuai urutan penambahannya, dan stempel waktu baru yang dihasilkan sesuai dengan itu:

sourceBuffer.mode = 'sequence';

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

Aplikasi dan demo MSE

Contoh 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