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
preload
için varsayılan ayar eskidenauto
idi. Ancak Chrome 64'ten itibaren bu ayar artık yapıldı. varsayılan olarakmetadata
değerine ayarlanır. Buna rağmen, Chrome'un masaüstü sürümünde video,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 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
preload
varsayılan olaraknone
değ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 videoposter
resimlerini 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.