Seperti elemen gambar, Anda juga dapat memuat video secara lambat. Video biasanya dimuat dengan elemen <video>
(meskipun metode alternatif yang menggunakan
<img>
telah
muncul dengan implementasi terbatas). Namun, Cara memuat <video>
secara lambat bergantung pada
kasus penggunaan. Mari kita bahas beberapa skenario yang masing-masing memerlukan
solusi yang berbeda.
Untuk video yang tidak diputar otomatis
Untuk video yang pemutarannya dimulai oleh pengguna (yaitu, video yang tidak
diputar otomatis), menentukan atribut
preload
pada elemen <video>
mungkin diinginkan:
<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Contoh di atas menggunakan atribut preload
dengan nilai none
untuk mencegah browser
melakukan pramuat data video apa pun. Atribut poster
memberikan elemen <video>
placeholder yang akan menempati ruang saat video dimuat. Alasannya adalah
perilaku default untuk memuat video dapat bervariasi dari browser ke browser:
- Di Chrome, setelan default untuk
preload
sebelumnya adalahauto
, tetapi mulai Chrome 64, setelan default sekarang adalahmetadata
. Meskipun demikian, pada Chrome versi desktop, sebagian video mungkin dimuat sebelumnya menggunakan headerContent-Range
. Browser berbasis Chromium dan Firefox lainnya berperilaku serupa. - Seperti halnya Chrome di desktop, Safari versi 11.0 desktop akan melakukan pramuat untuk berbagai video. Dari versi 11.2, hanya metadata video yang dipramuat. Di Safari di iOS, video tidak pernah dipramuat.
- Jika mode Penghemat Data
diaktifkan,
preload
akan ditetapkan secara default kenone
.
Karena perilaku default browser sehubungan dengan preload
tidak bersifat permanen,
Anda mungkin lebih memilih untuk bersikap vulgar. Dalam kasus ini ketika pengguna memulai
pemutaran, menggunakan preload="none"
adalah cara termudah untuk menunda pemuatan video di
semua platform. Atribut preload
bukan satu-satunya cara untuk menunda pemuatan
konten video. Pemutaran Cepat dengan Pramuat
Video dapat memberi Anda
beberapa ide dan insight tentang cara bekerja dengan pemutaran video di JavaScript.
Sayangnya, cara ini tidak terbukti berguna jika Anda ingin menggunakan video sebagai pengganti GIF animasi, yang akan dibahas selanjutnya.
Untuk video yang bertindak sebagai pengganti GIF animasi
Meskipun GIF animasi dapat digunakan secara luas, GIF animasi setara dengan video dalam beberapa hal, terutama dalam ukuran file. GIF animasi dapat mencapai beberapa megabita data. Video dengan kualitas visual yang serupa cenderung jauh lebih kecil.
Menggunakan elemen <video>
sebagai pengganti GIF animasi tidak semudah
elemen <img>
. GIF animasi memiliki tiga karakteristik:
- Iklan akan diputar secara otomatis saat dimuat.
- Metode tersebut melakukan loop terus-menerus (meskipun tidak selalu).
- Mereka tidak memiliki trek audio.
Mencapai ini dengan elemen <video>
akan terlihat seperti ini:
<video autoplay muted loop playsinline>
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Atribut autoplay
, muted
, dan loop
mudah dipahami.
playsinline
diperlukan agar putar otomatis terjadi di
iOS. Kini Anda memiliki
pengganti video sebagai GIF yang dapat digunakan di berbagai platform. Namun, bagaimana cara
melakukan pemuatan lambat? Untuk memulai, ubah markup <video>
sesuai kebutuhan:
<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
<source data-src="one-does-not-simply.webm" type="video/webm">
<source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>
Anda akan melihat penambahan atribut
poster
,
yang memungkinkan Anda menentukan placeholder untuk mengisi ruang elemen <video>
hingga video dimuat dengan lambat. Seperti halnya contoh pemuatan lambat <img>
,
simpan URL video dalam atribut data-src
pada setiap elemen
<source>
. Selanjutnya, gunakan kode JavaScript yang mirip dengan
contoh pemuatan lambat gambar berbasis Intersection Observer:
document.addEventListener("DOMContentLoaded", function() {
var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
if ("IntersectionObserver" in window) {
var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(video) {
if (video.isIntersecting) {
for (var source in video.target.children) {
var videoSource = video.target.children[source];
if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
videoSource.src = videoSource.dataset.src;
}
}
video.target.load();
video.target.classList.remove("lazy");
lazyVideoObserver.unobserve(video.target);
}
});
});
lazyVideos.forEach(function(lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
}
});
Saat memuat lambat elemen <video>
, Anda harus melakukan iterasi pada semua elemen
<source>
turunan dan membalik atribut data-src
-nya menjadi atribut src
. Setelah
melakukannya, Anda perlu memicu pemuatan video dengan memanggil
metode load
elemen, setelah itu media akan mulai diputar secara otomatis
per atribut autoplay
.
Dengan metode ini, Anda memiliki solusi video yang mengemulasi perilaku GIF animasi, tetapi tidak menimbulkan penggunaan data intensif yang sama seperti GIF animasi, dan Anda dapat memuat konten tersebut dengan lambat.
Library pemuatan lambat
Library berikut dapat membantu Anda memuat video dengan lambat:
- vanilla-lazyload dan lozad.js adalah opsi yang sangat ringan yang hanya menggunakan Intersection Observer. Karena itu, ekstensi ini memiliki performa tinggi, tetapi perlu di-polyfill sebelum Anda dapat menggunakannya di browser lama.
- yall.js adalah library yang menggunakan Intersection Observer dan kembali ke pengendali peristiwa. Elemen ini juga dapat lambat memuat gambar
poster
video menggunakan atributdata-poster
. - Jika memerlukan library pemuatan lambat khusus React, Anda dapat mempertimbangkan react-lazyload. Meskipun tidak menggunakan Intersection Observer, metode ini menyediakan metode pemuatan lambat yang sudah dikenal bagi mereka yang terbiasa mengembangkan aplikasi dengan React.
Masing-masing library pemuatan lambat ini didokumentasikan dengan baik, dengan banyak pola markup untuk berbagai upaya pemuatan lambat Anda.