Seperti halnya elemen gambar, Anda juga dapat memuat video dengan lambat. Video biasanya dimuat dengan elemen <video>
(meskipun metode alternatif yang menggunakan
<img>
telah
muncul dengan penerapan terbatas). Namun, cara memuat <video>
secara lambat bergantung pada
kasus penggunaan. Mari kita bahas beberapa skenario yang masing-masing memerlukan
solusi berbeda.
Untuk video yang tidak dapat diputar otomatis
Untuk video yang pemutarannya dimulai oleh pengguna (yaitu, video yang tidak
putar otomatis), Anda dapat menentukan atribut
preload
pada elemen <video>
:
<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
memberi elemen <video>
placeholder yang akan menempati ruang saat video dimuat. Alasannya adalah karena perilaku default untuk memuat video dapat bervariasi dari satu browser ke browser lainnya:
- Di Chrome, default untuk
preload
sebelumnya adalahauto
, tetapi mulai Chrome 64, sekarang default-nya adalahmetadata
. Meski begitu, pada Chrome versi desktop, sebagian video dapat dipramuat menggunakan headerContent-Range
. Browser berbasis Chromium dan Firefox lainnya berperilaku serupa. - Seperti halnya Chrome di desktop, Safari versi desktop 11.0 akan melakukan pramuat rentang video. Mulai versi 11.2, hanya metadata video yang dipramuat. Di Safari di iOS, video tidak pernah dipramuat.
- Saat mode Penghemat Data
diaktifkan,
preload
secara default disetel kenone
.
Karena perilaku default browser sehubungan dengan preload
tidak bersifat permanen,
menjadi eksplisit mungkin pilihan terbaik. Dalam kasus ini, saat pengguna memulai
pemutaran, menggunakan preload="none"
adalah cara termudah untuk menunda pemuatan video di
semua platform. Atribut preload
bukanlah satu-satunya cara untuk menunda pemuatan
konten video. Pemutaran Cepat dengan Pramuat Video dapat memberi Anda
beberapa ide dan insight tentang cara menggunakan pemutaran video di JavaScript.
Sayangnya, hal ini tidak terbukti berguna ketika Anda ingin menggunakan video sebagai pengganti GIF animasi, yang akan dibahas berikutnya.
Untuk video yang berfungsi sebagai pengganti GIF animasi
Meskipun GIF animasi dapat digunakan secara luas, GIF animasi ini setara dengan video dalam beberapa hal, terutama dalam ukuran file. GIF animasi dapat mencapai rentang beberapa megabita data. Video dengan kualitas visual yang serupa cenderung jauh lebih kecil.
Menggunakan elemen <video>
sebagai pengganti GIF animasi tidak
sesederhana elemen <img>
. GIF animasi memiliki tiga karakteristik:
- Iklan Display Responsif diputar secara otomatis saat dimuat.
- selalu berulang (meskipun itu tidak selalu terjadi).
- Mereka tidak memiliki trek audio.
Mencapai ini dengan elemen <video>
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 pemutaran otomatis dapat terjadi di
iOS. Sekarang Anda memiliki pengganti video-sebagai-GIF yang dapat digunakan di berbagai platform. Namun, bagaimana cara
memuatnya dengan lambat? Untuk memulai, ubah markup <video>
Anda sesuai dengan:
<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 menempati ruang elemen <video>
hingga video dimuat dengan lambat. Seperti halnya contoh pemuatan lambat <img>
,
sembunyikan URL video di 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 elemen <video>
secara lambat, Anda harus melakukan iterasi di seluruh elemen
<source>
turunan dan membalik atribut data-src
-nya ke atribut src
. Setelah
melakukannya, Anda perlu memicu pemuatan video dengan memanggil
metode load
elemen, setelah itu media akan mulai diputar secara otomatis
sesuai 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 secara 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. Oleh karena itu, library ini berperforma tinggi, tetapi perlu di-polyfill sebelum Anda dapat menggunakannya di browser yang lebih lama.
- yall.js adalah library yang menggunakan
Intersection Observer dan melakukan fallback ke pengendali peristiwa. Fitur ini juga dapat memuat gambar
poster
video dengan lambat menggunakan atributdata-poster
. - Jika memerlukan library pemuatan lambat khusus React, Anda dapat mempertimbangkan react-lazyload. Meskipun tidak menggunakan Intersection Observer, alat ini menyediakan metode pemuatan lambat gambar yang sudah dikenal bagi pengguna 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.