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 eskidenauto
iken Chrome 64'ten itibaren varsayılan olarakmetadata
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 olaraknone
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:
- Videolar yüklendiğinde otomatik olarak oynatılır.
- Sürekli döngü halinde çalışırlar (ancak her zaman bu geçerli değildir).
- 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 videoposter
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.