image öğelerinde olduğu gibi videoyu geç yükleyebilirsiniz. Videolar genellikle <video> öğesiyle yüklenir (ancak bir
alternatif yöntem olan
<img>,
sınırlı bir uygulama sonucu ortaya çıkmıştır.) <video> öğesinin nasıl geç yükleneceği
kullanım alanına sahip olursunuz. Her biri farklı görevler için gereken
farklı bir çözüm sunar.
Otomatik oynatılmayan video için
Oynatmanın kullanıcı tarafından başlatıldığı videolar (yani, oynatmanın başlatıldığı videolar)
otomatik oynatma), preload
özelliğinin
eklemesi istenen bir sonuç olabilir:<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>
Yukarıdaki örnekte, tarayıcıları engellemek için none değerine sahip bir preload özelliği kullanılmaktadır.
herhangi bir video verisinin önceden yüklenmesini engeller. 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 tarayıcıdan tarayıcıya değişebileceğini unutmayın:
- Chrome'da
preloadiçin varsayılan ayar eskidenautoidi. Ancak Chrome 64'ten itibaren bu ayar artık yapıldı. varsayılan olarakmetadatadeğerine ayarlanır. Buna rağmen, Chrome'un masaüstü sürümünde video,Content-Rangebaş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 aralığı önceden yükler. seçeceğiz. 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üklenmiş olarak gelir.
- Veri Tasarrufu modu şu durumlarda
etkin olduğunda
preloadvarsayılan olaraknonedeğerine ayarlanır.
preload ile ilgili tarayıcının varsayılan davranışları kesin olarak belirlenmediğinden,
açık ve net olmak muhtemelen en iyi çözümdür. Bu durumlarda, kullanıcı
bir cihazda preload="none" videonun yüklenmesini ertelemenin en kolay yoludur
tüm platformlarda kullanılabilir. Yüklemeyi ertelemenin tek yolu preload özelliği değildir.
göz önünde bulundurun. Video ile Hızlı Oynatma
Önceden yükleme özelliği,
JavaScript'te video oynatma ile çalışma konusunda bazı fikirler ve bilgiler.
Maalesef animasyonlu GIF'lere bakalım.
Animasyonlu GIF yerine kullanılan videolar için
Animasyonlu GIF'ler yaygın olarak kullanılsa da farklı şekillerde kullanabilirsiniz. Animasyonlu GIF'ler birkaç megabaytlık veri aralığına karşılık gelir. Benzer görsel kaliteye sahip videolar genellikle çok daha küçük olabilir.
<video> öğesini animasyonlu GIF'in yerine kullanmak doğru bir yöntem değildir
basit bir şekilde ele alacağız.<img> Animasyonlu GIF'lerin üç özelliği vardır:
- Videolar yüklendiğinde otomatik olarak oynatılır.
- Döngüler sürekli olarak devreye girer (ancak bu her zaman destek kaydı) tıklayın.
- 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.
playsinline, otomatik oynatmanın şurada gerçekleşmesi için gereklidir:
iOS'te kullanılabilir. Artık bir
farklı platformlarda çalışan, uygun bir GIF olarak video eşdeğeri. Ama nasıl
yükleme işini ne kadar kolaylaştırdı? 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>
poster
özelliği kullanıyorsanız
<video> öğesinin alanını kaplayacak bir yer tutucu belirtmenizi sağlar
yüklenene kadar yavaş yüklenene kadar devam eder. <img> geç yükleme örneğinde olduğu gibi,
her <source> cihazındaki data-src özelliğinde video URL'sini saklayın
öğesine dokunun. Burada,
Kesişim Gözlemci tabanlı görüntü geç yükleme örnekleri:
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 alt öğenin tamamının yinelenmesi gerekir
<source> öğelerini kullanın ve data-src özelliklerini src özelliklerine çevirin. Bir kez
Bunu yaptığınızda,
öğesinin load yöntemini kullanır. Bu işlemden sonra medya, otomatik olarak oynatılmaya başlar
(autoplay özelliğine göre)
Bu yöntemi kullanarak, animasyonlu GIF davranışını taklit eden bir video çözümünüz Ancak bu işlem, animasyonlu GIF'lerle aynı yoğun veri kullanımına neden olmaz. 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 son derece hafif seçeneklerdir reklam öğelerini kullanmanızı öneririz. Bu nedenle, yüksek performans gösterirler, ancak eski tarayıcılarda kullanabilmeniz için önce çoklu doldurma gerekir.
- yall.js,
Kesişim Gözlemcisi'ni kullanır ve etkinlik işleyicilere geri döner. Ayrıca,
data-posterözelliği kullanarak videoposterresimlerini geç yükleyebilir. - React'e özgü geç yükleme kitaplığına ihtiyacınız varsa react-lazyload. Bu sırada Intersection Observer kullanılmıyorsa bilinen bir tembel yöntem sağlar uygulama geliştirmeye alışkın olanlar için resim yükleme olanağı sunar.
Bu geç yükleme kitaplıklarının her biri, bol miktarda işaretleme ile ayrıntılı olarak belgelenmiştir. gösterir.