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 menggunakan <img> telah muncul dengan penerapan terbatas). 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 dapat diputar otomatis

Untuk video yang pemutarannya dimulai oleh pengguna (yaitu video yang tidak autoplay), menentukan 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 semua data video. poster memberi elemen <video> placeholder yang akan menempati ruang saat video dimuat. Alasannya adalah bahwa 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 defaultnya adalah metadata. Meski begitu, pada Chrome versi desktop, sebagian dari video dapat dipramuat 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 rentang video. Mulai versi 11.2, hanya metadata video yang dipramuat. Di Safari di iOS, video tidak pernah dipramuat.
  • Saat mode Penghemat Data sedang diaktifkan, preload akan ditetapkan secara default ke none.

Karena perilaku default browser sehubungan dengan preload tidak bersifat permanen, bersikap eksplisit mungkin yang terbaik adalah Anda. Dalam kasus ini, 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 Video Pramuat dapat memberi Anda beberapa ide dan wawasan tentang cara bekerja dengan pemutaran video di JavaScript.

Sayangnya, hal itu tidak terbukti berguna ketika Anda ingin menggunakan video sebagai pengganti GIF animasi, yang akan dibahas berikutnya.

Untuk video yang berfungsi sebagai pengganti GIF animasi

GIF animasi dapat digunakan secara luas, tetapi masih berada di bawah setara dengan berbagai cara, terutama dalam ukuran file. GIF animasi dapat diperluas ke kisaran beberapa megabita data. Video dengan kualitas visual yang serupa cenderung menjadi jauh lebih kecil.

Menggunakan elemen <video> sebagai pengganti GIF animasi tidak sesulit langsung sebagai elemen <img>. GIF animasi memiliki tiga karakteristik:

  1. Iklan Display Responsif diputar secara otomatis saat dimuat.
  2. selalu berulang (meskipun itu tidak selalu kasus).
  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 sebagai pengganti video-sebagai-GIF yang dapat digunakan di berbagai platform. Namun, bagaimana cara tentang pemuatan 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 poster , yang memungkinkan Anda menentukan placeholder untuk menempati ruang elemen <video> hingga videonya dimuat dengan lambat. Seperti halnya contoh pemuatan lambat <img>, menyimpan URL video di atribut data-src pada setiap <source> . Selanjutnya, gunakan kode JavaScript yang mirip dengan Contoh pemuatan lambat gambar berbasis Pengamat Persimpangan:

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);
    });
  }
});

Jika memuat elemen <video> secara lambat, Anda harus melakukan iterasi pada semua turunan elemen <source> dan balik atribut data-src-nya menjadi atribut src. Satu kali selesai, Anda perlu memicu pemuatan video dengan memanggil 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 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. Dengan demikian, mereka berperforma tinggi, tetapi perlu di-polyfill sebelum Anda dapat menggunakannya di browser yang lebih lama.
  • yall.js adalah library yang menggunakan Intersection Observer dan kembali 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, fitur ini menyediakan metode malas yang sudah dikenal memuat gambar untuk mereka yang terbiasa mengembangkan aplikasi dengan React.

Masing-masing library pemuatan lambat ini didokumentasikan dengan baik, dengan banyak markup pola untuk berbagai upaya pemuatan lambat Anda.