Pemuatan lambat video

Jeremy Wagner
Rachel Andrew

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 adalah auto, tetapi mulai Chrome 64, sekarang default-nya adalah metadata. Meski begitu, pada Chrome versi desktop, sebagian video dapat dipramuat menggunakan header Content-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 ke none.

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:

  1. Iklan Display Responsif diputar secara otomatis saat dimuat.
  2. selalu berulang (meskipun itu tidak selalu terjadi).
  3. 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 atribut data-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.