Video geç yükleniyor

Jeremy Wagner

Rachel Andrew

Resim öğelerinde olduğu gibi, videoyu da geç yükleyebilirsiniz. Videolar genellikle <video> öğesiyle yüklenir (ancak <img> kullanan alternatif bir yöntem, sınırlı bir uygulama süreciyle ortaya çıkmıştır). Ancak <video> geç yüklemenin nasıl yapılacağı kullanım alanına bağlıdır. Her biri farklı bir çözüm gerektiren iki senaryoyu tartışalım.

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ğinin belirtilmesi 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 verilerini önceden yüklemesini önlemek için none değerine sahip bir preload özelliği kullanılır. poster özelliği, <video> öğesine video yüklenirken alanı kaplayacak bir yer tutucu verir. Bunun nedeni, video yüklemeyle ilgili varsayılan davranışların tarayıcıdan tarayıcıya farklılık göstermesidir:

• Chrome'da preload için varsayılan değer auto iken Chrome 64 itibarıyla artık varsayılan olarak metadata değerine ayarlıdır. Bu durumda bile, Chrome'un masaüstü sürümünde videonun bir kısmı Content-Range başlığı kullanılarak önceden yüklenebilir. Diğer Chromium tabanlı tarayıcılar ve Firefox da benzer şekilde davranır.
• Masaüstündeki Chrome'da olduğu gibi, Safari'nin 11.0 masaüstü sürümleri de bir dizi videoyu ö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 değerine ayarlanır.

preload ile ilgili tarayıcı varsayılan davranışları değişmez. Dolayısıyla, müstehcen olmak muhtemelen en iyisidir. Kullanıcının oynatmayı başlattığı bu 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 oynatmayla çalışma hakkında size fikir ve fikir verebilir.

Maalesef animasyonlu GIF'lerin yerine video kullanmak istediğinizde bu çözüm işe yaramıyor. Bu konuyu bir sonraki bölümde ele alacağız.

Animasyonlu GIF yerine kullanılan video için

Animasyonlu GIF'ler yaygın olarak kullanılmakla birlikte, birçok açıdan, özellikle dosya boyutu açısından video eşdeğerlerine eşittir. Animasyonlu GIF'ler birkaç megabayt veri aralığına yayılabilir. Benzer görsel kaliteye sahip videolar genellikle ç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. Yüklendiğinde otomatik olarak oynatılır.
2. Bunlar, sürekli olarak döngü oluşturur (ancak bu her zaman değildir).
3. Bu kampanyaların ses parçası yok.

Bu, <video> öğesiyle elde edildiğinde 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çıklama gerektirmedendir. playsinline, iOS'te otomatik oynatmanın gerçekleşmesi için gereklidir. Artık çeşitli platformlarda çalışan, GIF olarak yayınlanabilir bir videonuz var. Peki ama geç 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örürsünüz. <img> geç yükleme örneğinde olduğu gibi, video URL'sini her <source> öğesinde data-src özelliğinde sakla. Ardından, Kesişim Gözlemcisi tabanlı resim geç yükleme örneklerine benzer şekilde 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 <source> alt öğ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. Bunun 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çeriği 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 hafif seçeneklerdir. Bu nedenle, yüksek performans gösterirler, ancak bunları eski tarayıcılarda kullanmadan önce çoklu doldurulmaları gerekir.
• yall.js, Intersection Observer kullanan ve etkinlik işleyicilere geri dönen bir kitaplıktır. Ayrıca data-poster özelliğini kullanarak video poster resimlerini geç yükleyebilir.
• React'a özel bir geç yükleme kitaplığına ihtiyacınız varsa react-lazyload özelliğini kullanmayı düşünebilirsiniz. Intersection Observer'ı kullanmasa da React ile uygulama geliştirmeye alışkın olan kişiler için görüntülerin geç yüklenmesi için bilinen bir yöntem sağlar.

Bu geç yükleme kitaplıklarının her biri, çeşitli geç yükleme girişimleriniz için bol miktarda işaretleme kalıbıyla birlikte ayrıntılı bir şekilde belgelenmiştir.