Pemuatan lambat video

Jeremy Wagner
Andi

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 adalah auto, tetapi mulai Chrome 64, setelan default sekarang adalah metadata. Meskipun demikian, pada Chrome versi desktop, sebagian video mungkin dimuat sebelumnya menggunakan header Content-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 ke none.

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:

  1. Iklan akan diputar secara otomatis saat dimuat.
  2. Metode tersebut melakukan loop terus-menerus (meskipun tidak selalu).
  3. 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 atribut data-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.