Video geç yükleniyor

Jeremy Wagner
Rachel Andrew

image öğelerinde olduğu gibi videoyu geç yükleyebilirsiniz. Videolar genellikle <video> öğesiyle yüklenir (sınırlı uygulama ile <img> kullanan alternatif bir yöntem ortaya çıkmıştır). Yine de <video> ürününün nasıl geç yükleneceği kullanım alanına bağlıdır. Her biri farklı bir çözüm gerektiren birkaç senaryoyu inceleyelim.

Otomatik oynatılmayan video için

Oynatmanın kullanıcı tarafından başlatıldığı videolar (yani otomatik olarak oynatılmayan videolar) için <video> öğesinde preload özelliğini belirtmek istenebilir:

<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>

Yukarıdaki örnekte, tarayıcıların herhangi bir video verisini önceden yüklemesini önlemek için none değerine sahip bir preload özelliği kullanılmaktadır. poster özelliği, <video> öğesine video yüklenirken alanı kaplayacak bir yer tutucu verir. Bunun nedeni, video yükleme için varsayılan davranışlarının tarayıcıdan tarayıcıya değişebilmesidir:

  • Chrome'da preload için varsayılan ayar eskiden auto iken Chrome 64'ten itibaren varsayılan olarak metadata olarak belirlenmiştir. Buna rağmen Chrome'un masaüstü sürümünde videonun bir bölümü, Content-Range başlığı kullanılarak önceden yüklenebilir. Diğer Chromium tabanlı tarayıcılar ve Firefox da benzer şekilde çalışır.
  • Masaüstündeki Chrome'da olduğu gibi, Safari'nin 11.0 masaüstü sürümleri de bir video aralığını önceden yükler. 11.2 sürümünden itibaren yalnızca video meta verileri önceden yüklenir. iOS'teki Safari'de videolar hiçbir zaman önceden yüklenmez.
  • Veri Tasarrufu modu etkinleştirildiğinde preload, varsayılan olarak none olur.

preload ile ilgili tarayıcının varsayılan davranışları kesin olarak belirlenmiş olmadığından, açık olmak muhtemelen en iyi seçenektir. Kullanıcının oynatmayı başlattığı durumlarda, videonun tüm platformlarda yüklenmesini ertelemenin en kolay yolu preload="none" kullanmaktır. preload özelliği, video içeriğinin yüklenmesini ertelemenin tek yolu değildir. Video Önceden Yükleme ile Hızlı Oynatma, JavaScript'te video oynatma ile çalışma konusunda size bazı fikirler ve bilgiler sağlayabilir.

Bir sonraki adımda anlatacağımız animasyon GIF'lerin yerine video kullanmak istediğinizde maalesef bu araçtan yararlanamazsınız.

Animasyonlu GIF yerine kullanılan videolar için

Animasyonlu GIF'ler yaygın olarak kullanılsa da, özellikle dosya boyutu bakımından çeşitli açılardan video eşdeğerlerinden farklıdır. Animasyonlu GIF'ler, birkaç megabaytlık veri aralığına yayılabilir. Görsel kalitesi benzer olan videolar çok daha küçük olur.

Animasyonlu GIF'in yerine <video> öğesini kullanmak <img> öğesi kadar kolay değildir. Animasyonlu GIF'lerin üç özelliği vardır:

  1. Videolar yüklendiğinde otomatik olarak oynatılır.
  2. Sürekli döngü halinde çalışırlar (ancak her zaman bu geçerli değildir).
  3. Ses parçasına sahip değiller.

Bu işlem <video> öğesi ile aşağıdaki gibi görünür:

<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>

autoplay, muted ve loop özellikleri açıklayıcıdır. iOS'te otomatik oynatmanın gerçekleşmesi için playsinline gereklidir. Artık farklı platformlarda çalışan, GIF olarak sunulabilir bir video yedeğiniz var. Peki, tembel yükleme nasıl yapılır? Başlamak için <video> işaretlemenizi uygun şekilde değiştirin:

<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>

Video geç yüklenene kadar <video> öğesinin alanını kaplayacak bir yer tutucu belirtmenizi sağlayan poster özelliğinin eklendiğini göreceksiniz. <img> geç yükleme örneğinde olduğu gibi video URL'sini, her <source> öğesindeki data-src özelliğinde saklayın. Burada, Kesişim Gözlemci tabanlı görüntü geç yükleme örneklerine benzer bir JavaScript kodu kullanın:

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

Bir <video> öğesini geç yüklediğinizde tüm alt <source> öğelerini yinelemeniz ve data-src özelliklerini src özelliklerine çevirmeniz gerekir. Bunu yaptıktan sonra, öğenin load yöntemini çağırarak videonun yüklenmesini tetiklemeniz gerekir. Ardından medya, autoplay özelliğine göre otomatik olarak oynatılmaya başlar.

Bu yöntemi kullandığınızda, animasyonlu GIF davranışını emüle eden ancak animasyonlu GIF'lerle aynı yoğun veri kullanımına neden olmayan bir video çözümünüz olur ve bu içerikleri geç yükleyebilirsiniz.

Kitaplıkları geç yükleme

Aşağıdaki kitaplıklar, videoyu geç yüklemenize yardımcı olabilir:

  • vanilla-lazyload ve lozad.js, yalnızca Intersection Observer'ı kullanan son derece hafif seçeneklerdir. Bu nedenle, yüksek performans gösterirler, ancak bunları eski tarayıcılarda kullanabilmeniz için önce çoklu doldurulmaları gerekir.
  • yall.js, Intersection Observer kullanıldığı ve etkinlik işleyicilerin kullanıldığı bir kitaplıktır. Ayrıca, data-poster özelliği kullanarak video poster resimlerini geç yükleyebilir.
  • React'e özgü geç yükleme kitaplığına ihtiyacınız varsa react-lazyload'u kullanmayı düşünebilirsiniz. Intersection Observer kullanmasa da React ile uygulama geliştirmeye alışkın olanlar için görüntü yüklemelerine dair bilinen bir yöntem sunar.

Bu geç yükleme kitaplıklarının her biri, çeşitli geç yükleme çalışmalarınız için çok sayıda işaretleme kalıbıyla birlikte iyi belgelenmiştir.