Video yang lambat dimuat

Biasanya video dimuat menggunakan tag video (meskipun metode alternatif menggunakan img telah muncul , namun kemampuannya terbatas). Cara menerapkan pemuatan lambat video bergantung pada kasus penggunaannya. Mari kita bahas beberapa skenario, masing-masing memerlukan solusi berbeda.

Untuk video tanpa putar otomatis otomatis

Untuk video yang dimulai oleh pengguna (yaitu video yang tidak diputar secara otomatis), Anda perlu menentukan atribut yang sesuai di tag 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>

Pada contoh di atas menggunakan atribut preload dengan nilai none , yang melarang browser mendownload data video apa pun. Atribut poster menyetel video ke gambar pratinjau yang akan menggantikan video di halaman hingga dimuat. Perlunya pratinjau karena fakta bahwa pemuatan video berbeda di browser yang berbeda:

• Di Chrome, nilai default untuk atribut pramuat adalah auto , tetapi sejak versi 64, nilai defaultnya adalah metadata . Meski begitu, di Chrome desktop, sebagian dari video dapat dimuat sebelumnya menggunakan tajuk Rentang Konten. Firefox, Edge, dan Internet Explorer 11 berperilaku serupa.
• Chrome, Safari 11.0 . 11.2, , Safari iOS .
• , preload none.

Karena perilaku default berbeda dari browser ke browser terkait dengan pemuatan otomatis, mungkin yang terbaik adalah menyetel perilaku ini secara eksplisit. Dalam kasus ketika pengguna memulai pemutaran sendiri, menggunakan preload = "none" adalah cara termudah untuk menunda pemuatan video di semua platform. Atribut pramuat bukanlah satu-satunya cara untuk menunda pemuatan konten video. Pemutaran Cepat dengan Pramuat Video dapat memberi Anda beberapa ide dan wawasan untuk bekerja dengan pemutaran video di JavaScript.



Sayangnya, ini tidak berguna jika Anda ingin menggunakan video daripada GIF, kami akan membicarakannya di bawah.

Untuk video yang berfungsi sebagai pengganti GIF animasi

Meskipun GIF animasi banyak digunakan, dalam banyak hal mereka kurang setara dengan video, terutama dalam ukuran file. GIF animasi dapat memakan beberapa megabyte data. Video dengan kualitas visual serupa biasanya berukuran jauh lebih kecil.



Menggunakan elemen video sebagai pengganti GIF animasi tidaklah mudah. GIF animasi memiliki tiga karakteristik:

1. Mereka secara otomatis diputar setelah diunduh.
2. Mereka terus berulang ( meskipun ini tidak selalu terjadi ).
3. Mereka tidak memiliki trek audio.

Mencapai ini dengan tag 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 sudah cukup jelas. playsinline diperlukan untuk pemutaran otomatis di iOS . Anda sekarang memiliki pengganti animasi video yang dapat digunakan. Tapi bagaimana Anda menambahkan pemuatan lambat ke video? Chrome tidak memiliki masalah dengan pemuatan video yang lambat , tetapi Anda tidak dapat mengandalkan semua browser untuk menyediakan perilaku yang dioptimalkan ini. Bergantung pada audiens dan persyaratan aplikasi Anda, Anda mungkin perlu mengambil tindakan sendiri. Pertama, mari kita ubah koneksi video:

<video 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 mungkin melihat penambahan atribut poster yang memungkinkan Anda menentukan gambar pratinjau yang terletak di halaman alih-alih tag video sampai video dimuat lambat. URL video ditempatkan di atribut data-src dari setiap elemen sumber .



Kami menggunakan JavaScript untuk mengatur pemuatan "lambat" menggunakan IntersectionObserver.

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

Kita mengulang semua elemen turunan dari source dan mengonversi atribut data-srcnya menjadi atribut src . Setelah Anda melakukan ini, Anda perlu mulai memuat video dengan memanggil metode load , setelah itu media akan mulai diputar secara otomatis sesuai dengan atribut autoplay .



Dengan menggunakan metode ini, Anda mendapatkan solusi video siap pakai yang meniru perilaku GIF animasi, tetapi tidak memerlukan penggunaan intensif data yang sama, dan Anda dapat memuat konten ini dengan malas.

Pustaka Pemuatan Malas

Pustaka berikut dapat membantu Anda dengan video pemuatan lambat:

• lozad.js adalah versi ultra-ringan yang hanya menggunakan Intersection Observer. Jadi, ini sangat efisien, tetapi perlu di-polyfill sebelum Anda dapat menggunakannya di browser lama.
• yall.js adalah pustaka yang menggunakan Intersection Observer dan mengakses penangan kejadian. Ini kompatibel dengan IE11 dan browser utama.
• Jika Anda membutuhkan pustaka lazyload untuk React, Anda dapat mempertimbangkan react-lazyload . Library ini tidak menggunakan Intersection Observer, tetapi menyediakan cara untuk memuat gambar secara malas yang sudah dikenal oleh developer React.

Masing-masing pustaka ini didokumentasikan dan berisi banyak templat markup untuk berbagai tugas pemuatan lambat.