Dalam artikel ini, Anda akan mempelajari konsep tingkat lanjut media streaming dan pada akhirnya harus memiliki pemahaman yang baik tentang berbagai kasus penggunaan, protokol, dan ekstensi streaming. Mari kita mulai dengan penjelasan tentang streaming.
Streaming media adalah cara mengirimkan dan memutar konten media dengan bagian. Daripada memuat satu file, yang dapat menjadi lambat jika tidak dioptimalkan untuk jaringan, pemutar membaca file manifes yang menjelaskan bagaimana media target dibagi menjadi potongan data individual. Potongan media kemudian digabungkan secara dinamis kembali bersama saat runtime—mungkin pada kecepatan bit yang berbeda, yang akan Anda pelajari nanti.
Perlu diingat bahwa untuk menyediakan
streaming di situs web Anda, server
harus mendukung header permintaan HTTP Range. Pelajari lebih lanjut Accept-Ranges
header di The <video> dan <source> tag.
Kasus penggunaan streaming
Membuat potongan media dan manifes yang diperlukan untuk menjelaskan streaming tidak
dengan sangat mudah, tetapi streaming membuka beberapa kasus penggunaan menarik yang
tidak mungkin dicapai hanya dengan mengarahkan elemen <video>
ke satu set file sumber statis. Anda akan mempelajari lebih
lanjut tentang cara
menambahkan media ke halaman web di bagian berikutnya. Pertama, Anda harus mengetahui
kasus penggunaan untuk streaming multimedia jika Anda ingin melangkah lebih dari sekedar
memuat beberapa file ke dalam elemen <video>
.
- Streaming adaptif adalah tempat potongan media dienkode dalam beberapa kecepatan bit, dan potongan media dengan kualitas tertinggi yang sesuai dengan {i>bandwidth <i}yang saat ini tersedia dikembalikan ke pemutar media.
- Live streaming adalah tempat potongan media dienkode dan tersedia dalam secara real-time.
- Menginjeksikan media adalah tempat media lain, seperti iklan, dimasukkan ke dalam streaming tanpa membuat pemutar mengubah sumber media.
Protokol streaming
Dua protokol streaming yang paling umum digunakan di web adalah Dynamic Streaming Adaptif melalui HTTP (DASH) dan HTTP Live Streaming (HLS). Pemain yang mendukung protokol ini akan mengambil file manifes yang dihasilkan, mencari tahu potongan media mana yang akan diminta, dan kemudian menggabungkannya ke dalam pengalaman media sosial.
Menggunakan <video>
untuk memutar streaming
Banyak browser tidak akan memutar streaming Anda secara native. Meskipun ada beberapa
dukungan untuk pemutaran HLS native, browser umumnya tidak mendukung DASH native
pemutaran streaming. 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. Feed adalah canggih dan aplikasi yang menggunakan {i>stream<i} memiliki kebutuhan berbeda.
File manifes biasanya menjelaskan banyak varian dari satu media. Berpikir secara berbeda kecepatan bit, beberapa trek audio, dan bahkan media yang sama yang dienkode dalam format font.
Beberapa aplikasi mungkin ingin menyimpan video dalam jumlah yang lebih besar dalam {i>buffer<i}, orang lain mungkin ingin mengambil beberapa detik pertama video dari khusus, dan sebagian ingin menerapkan logika mereka sendiri untuk streaming adaptif. Di sinilah Anda perlu memiliki semacam fitur browser bawaan untuk menghasilkan {i>stream <i}media dan diputar, dan itu pun terjadi.
Ekstensi Sumber Media
Untungnya, W3C menentukan sesuatu yang disebut Media Source Extensions (MSE)
yang akan memungkinkan JavaScript membuat streaming media. Secara singkat, MSE memungkinkan
developer untuk melampirkan objek MediaSource
ke elemen <video>
dan memiliki
ia memutar data media apa pun yang dipompa ke {i>buffer<i} yang terpasang pada
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 {i>buffer<i}, mis. menggunakan
fetch
.
Meskipun konsep dasar ini sederhana, dan tentu saja 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 bernama Kino yang menunjukkan bagaimana Anda
akan mengembangkan {i>website<i} media {i>streaming <i}
dasar yang memberikan
pemutaran media offline hanya dengan menggunakan elemen <video>
sederhana. Ada paket
dalam roadmap kami untuk mendukung kerangka kerja dan pengelolaan hak digital,
baru. 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 yang harus dienkode dalam berbagai format font. Namun, pada tahun 2016, dukungan untuk file MP4 (fMP4) standar ditambahkan ke HLS, format yang juga didukung DASH.
Potongan video yang menggunakan container fMP4
dan codec H.264
didukung
oleh protokol dan dapat dimainkan oleh sebagian besar pemain. Hal ini memungkinkan
produser konten hanya perlu mengenkode video sekali saja, sehingga menghemat waktu
dan kapasitas disk.
Untuk mencapai kualitas yang lebih baik dan ukuran file yang lebih rendah, Anda dapat memilih untuk
mengenkode beberapa set potongan media menggunakan format yang lebih efisien seperti VP9
,
meskipun sebelum kita melangkah lebih jauh,
Anda harus mempelajari terlebih dahulu cara
Siapkan file media untuk web, dan langkah berikutnya.