Dalam artikel ini, Anda akan mempelajari konsep lanjutan streaming media dan pada akhirnya Anda akan memiliki pemahaman yang baik tentang berbagai kasus penggunaan, protokol, dan ekstensi streaming. Mari kita mulai dengan penjelasan tentang streaming.
Streaming media adalah cara menayangkan dan memutar konten media sepotong demi sepotong. Alih-alih memuat satu file, yang dapat menjadi lambat jika tidak dioptimalkan untuk jaringan, pemutar membaca file manifes yang menjelaskan cara media target dibagi menjadi potongan data individual. Potongan media kemudian digabungkan kembali secara dinamis saat runtime—mungkin pada kecepatan bit yang berbeda, yang akan Anda pelajari nanti.
Perlu diingat bahwa untuk menyediakan streaming di situs Anda, server
harus mendukung header permintaan HTTP Range. Pelajari header Accept-Ranges
lebih lanjut
di artikel Tag <video> dan <source>.
Kasus penggunaan streaming
Menghasilkan potongan media dan manifes yang diperlukan yang menjelaskan streaming tersebut tidak
benar-benar mudah, tetapi streaming dapat membuka beberapa kasus penggunaan menarik yang
tidak mungkin dicapai hanya dengan mengarahkan elemen <video>
ke sekumpulan file sumber statis. Anda akan mempelajari lebih lanjut cara
menambahkan media ke halaman web di bagian selanjutnya. Pertama, Anda harus mengetahui
beberapa kasus penggunaan untuk streaming multimedia jika Anda ingin melangkah lebih dari sekadar
memuat beberapa file ke dalam elemen <video>
.
- Streaming adaptif adalah tempat potongan media dienkode dalam beberapa bitrate, dan potongan media dengan kualitas tertinggi yang sesuai dengan bandwidth klien yang saat ini tersedia akan ditampilkan ke pemutar media.
- Live streaming adalah tempat potongan media dienkode dan tersedia secara real time.
- Menginjeksikan media adalah tempat media lain, seperti iklan, dimasukkan ke streaming tanpa perlu 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, mencari tahu potongan media mana 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 dengan mengarahkan <source>
dalam elemen <video>
ke file manifes.
<video controls>
<source src="manifest.mpd" type="application/dash+xml">
</video>
Apa yang tampak sebagai defisit sebenarnya adalah kekuatan yang tersembunyi. Stream sangat bermanfaat dan aplikasi yang menggunakan stream memiliki kebutuhan yang berbeda.
File manifes biasanya menjelaskan banyak varian dari satu media. Pikirkan kecepatan bit yang berbeda, beberapa trek audio, dan bahkan media yang sama yang dienkode dalam format berbeda.
Beberapa aplikasi mungkin ingin menyimpan video dalam jumlah yang lebih besar dalam buffer, yang lain mungkin ingin mengambil data beberapa detik pertama video dari episode mendatang, dan sebagian lainnya ingin menerapkan logika mereka sendiri untuk streaming adaptif. Di sinilah Anda perlu memiliki semacam fitur browser bawaan guna menghasilkan streaming media untuk diputar, dan itu kebetulan ada satu streaming media.
Ekstensi Sumber Media
Untungnya, W3C menentukan sesuatu yang disebut Media Source Extensions (MSE)
yang akan memungkinkan JavaScript membuat streaming media kita. Singkatnya, MSE memungkinkan
developer melampirkan objek MediaSource
ke elemen <video>
dan memintanya
memutar data media apa pun yang dipompa ke buffer yang terpasang 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 menggambarkan beberapa hal:
- Sejauh yang diperhatikan
<video>
, elemen tersebut 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 dalam buffer, misalnya menggunakan
fetch
.
Meskipun konsep dasar ini sederhana, dan memungkinkan untuk menulis pemutar video yang kompatibel dengan DASH dan HLS dari awal, kebanyakan orang biasanya memilih salah satu solusi open source matang yang sudah ada, seperti Shaka Player, JW Player, atau Video.js.
Namun, kami telah membuat PWA Media demo yang disebut Kino, yang menunjukkan cara
mengembangkan situs media streaming dasar Anda sendiri yang menyediakan
pemutaran media offline hanya dengan menggunakan elemen <video>
sederhana. Ada rencana dalam roadmap kami untuk mendukung framework dan pengelolaan hak digital, di antara fitur-fitur lainnya. Jadi, periksa kembali untuk mengetahui pembaruan dari waktu ke waktu, atau minta fitur.
Baca selengkapnya tentang hal ini di artikel PWA dengan streaming offline.
Format potongan media
Untuk waktu yang lama, DASH dan HLS memerlukan 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 protokol dan dapat diputar oleh sebagian besar pemain. Cara ini memungkinkan
produser konten mengenkode videonya sekali saja, sehingga menghemat waktu
dan kapasitas disk.
Untuk mencapai kualitas yang lebih baik dan ukuran file yang lebih rendah, Anda dapat mengenkode
beberapa kumpulan potongan media menggunakan format yang lebih efisien seperti VP9
.
Namun, sebelum lanjut, Anda harus mempelajari cara
Menyiapkan file media untuk web terlebih dahulu.