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ğerauto
iken Chrome 64 itibarıyla artık varsayılan olarakmetadata
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 olaraknone
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:
- Yüklendiğinde otomatik olarak oynatılır.
- Bunlar, sürekli olarak döngü oluşturur (ancak bu her zaman değildir).
- 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 videoposter
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.