Dalam artikel ini, Anda akan mempelajari konsep streaming media yang lebih lanjut dan pada akhirnya akan memiliki pemahaman yang baik tentang berbagai kasus penggunaan, protokol, dan ekstensi streaming. Mari kita mulai dengan penjelasan tentang apa itu streaming.
Streaming media adalah cara mengirimkan dan memutar konten media secara berurutan. Daripada memuat satu file, yang dapat lambat jika tidak dioptimalkan untuk jaringan, pemutar membaca file manifes yang menjelaskan cara media target dibagi menjadi beberapa bagian data. Potongan media kemudian digabungkan kembali secara dinamis saat runtime—mungkin dengan bitrate yang berbeda, yang akan Anda pelajari nanti.
Perhatikan bahwa untuk menyediakan streaming di situs Anda, server
harus mendukung header permintaan HTTP Range. Pelajari header Accept-Ranges
lebih lanjut dalam artikel Tag <video> dan <source>.
Kasus penggunaan streaming
Membuat potongan media dan manifes yang diperlukan untuk mendeskripsikan streaming tidak
semudah itu, tetapi streaming membuka beberapa kasus penggunaan menarik yang
tidak dapat dicapai hanya dengan mengarahkan elemen <video>
ke sekumpulan file sumber statis. Anda akan mempelajari lebih lanjut cara
menambahkan media ke halaman web di bagian berikutnya. Pertama, Anda harus mengetahui beberapa kasus penggunaan untuk streaming multimedia jika ingin melakukan lebih dari sekadar memuat beberapa file ke dalam elemen <video>
.
- Streaming adaptif adalah tempat potongan media dienkode dalam beberapa bitrate, dan potongan media berkualitas tertinggi yang cocok dengan bandwidth klien yang saat ini tersedia akan ditampilkan ke pemutar media.
- Siaran live adalah tempat potongan media dienkode dan tersedia secara real time.
- Memasukkan media adalah saat media lain seperti iklan dimasukkan ke dalam streaming tanpa mengharuskan pemutar mengubah sumber media.
Protokol streaming
Dua protokol streaming yang paling umum digunakan di web adalah Dynamic Adaptive Streaming over HTTP (DASH) dan HTTP Live Streaming (HLS). Pemutar yang mendukung protokol ini akan mengambil file manifes yang dihasilkan, menemukan bagian media yang akan diminta, lalu menggabungkannya ke dalam pengalaman media akhir.
Menggunakan <video>
untuk memutar streaming
Banyak browser tidak akan memutar streaming Anda secara native. Meskipun ada beberapa
dukungan native untuk pemutaran HLS, browser umumnya tidak mendukung pemutaran streaming DASH native. Artinya, sering kali tidak cukup hanya mengarahkan <source>
dalam elemen <video>
ke file manifes.
<video controls>
<source src="manifest.mpd" type="application/dash+xml">
</video>
Hal yang mungkin tampak sebagai defisit sebenarnya adalah kekuatan yang tersembunyi. Streaming sangat canggih dan aplikasi yang menggunakan streaming memiliki kebutuhan yang berbeda.
File manifes biasanya menjelaskan banyak varian media tunggal. Misalnya, bitrate yang berbeda, beberapa trek audio, dan bahkan media yang sama yang dienkode dalam format yang berbeda.
Beberapa aplikasi mungkin ingin menyimpan video dalam jumlah yang lebih besar di buffering, beberapa aplikasi mungkin ingin melakukan pengambilan data beberapa detik pertama video dari episode mendatang, dan beberapa aplikasi ingin menerapkan logika mereka sendiri untuk streaming adaptif. Di sinilah Anda ingin memiliki semacam fitur browser bawaan untuk membuat streaming media untuk pemutaran, dan kebetulan ada.
Ekstensi Sumber Media
Untungnya, W3C menentukan sesuatu yang disebut Media Source Extensions (MSE)
yang akan memungkinkan JavaScript membuat streaming media. Singkatnya, MSE memungkinkan
developer melampirkan objek MediaSource
ke elemen <video>
dan
memutar data media apa pun yang dimasukkan ke buffering yang dilampirkan ke
instance MediaSource
.
Contoh dasar
const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
'sourceopen',
() => {
const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const buffer = mediaSource.addSourceBuffer(mimeString);
buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
}
);
Contoh sederhana di atas mengilustrasikan beberapa hal:
- Sejauh yang diketahui,
<video>
menerima data media dari URL. - URL yang dihasilkan hanyalah pointer ke instance
MediaSource
. - Instance
MediaSource
membuat satu atau beberapa instanceSourceBuffer
. - Kemudian, kita hanya menambahkan data media biner ke buffer, misalnya menggunakan
fetch
.
Meskipun konsep dasar ini sederhana, dan Anda tentu dapat menulis pemutar video yang kompatibel dengan DASH dan HLS dari awal, sebagian besar orang biasanya memilih salah satu solusi open source yang sudah matang, seperti Shaka Player, JW Player, atau Video.js.
Namun, kami telah membuat demo PWA Media bernama Kino yang menunjukkan cara
mengembangkan situs media streaming dasar Anda sendiri yang menyediakan
pemutaran media offline hanya menggunakan elemen <video>
sederhana. Ada rencana
dalam roadmap kami untuk mendukung framework dan pengelolaan hak digital, di antara fitur
lainnya. Jadi, periksa kembali untuk mengetahui informasi terbaru dari waktu ke waktu, atau minta fitur.
Baca selengkapnya di artikel PWA dengan streaming offline.
Format potongan media
Untuk waktu yang lama, DASH dan HLS mewajibkan potongan media untuk dienkode dalam format yang berbeda. Namun, pada tahun 2016, dukungan untuk file MP4 terfragmentasi (fMP4) standar ditambahkan ke HLS, format yang juga didukung DASH.
Potongan video yang menggunakan penampung fMP4
dan codec H.264
didukung oleh kedua protokol dan dapat diputar oleh sebagian besar pemutar. Hal ini memungkinkan
produser konten mengenkode video mereka hanya sekali, yang pada akhirnya menghemat waktu
dan ruang disk.
Untuk mendapatkan kualitas yang lebih baik dan ukuran file yang lebih kecil, sebaiknya pilih untuk
mengenkode beberapa kumpulan potongan media menggunakan format yang lebih efisien seperti VP9
,
meskipun sebelum kita melangkah lebih jauh, Anda harus terlebih dahulu mempelajari cara
Menyiapkan file media untuk web, dan itu yang akan kita bahas selanjutnya.