Podobnie jak w przypadku elementów graficznych, leniwe ładowanie wideo. Filmy są zwykle wczytywane za pomocą elementu <video>
(mimo że
metoda alternatywna
<img>
ma
pojawia się z ograniczoną implementacją). Sposób leniwego ładowania <video>
zależy od
jego zastosowania. Omówmy kilka scenariuszy, w których każdy z nich wymaga
i innego rozwiązania.
Filmy, które nie są odtwarzane automatycznie
W przypadku filmów, w których odtwarzanie zostało inicjowane przez użytkownika (tzn. takie, które nie
autoodtwarzanie), określając preload
w elemencie <video>
może być pożądane:
<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>
W przykładzie powyżej użyto atrybutu preload
o wartości none
, aby uniemożliwić przeglądarkom
przez wstępne wczytywanie jakichkolwiek danych wideo. poster
nadaje elementowi <video>
obiekt zastępczy, który będzie zajmować miejsce podczas wczytywania filmu. Powodem jest to,
Domyślne zachowanie przy ładowaniu filmu może różnić się w zależności od przeglądarki:
- W Chrome domyślnym ustawieniem dla
preload
byłoauto
, ale od wersji 64 jest teraz domyślna wartość tometadata
. Mimo to w komputerowej wersji Chrome część film może być wstępnie wczytywany za pomocą nagłówkaContent-Range
. Inne przeglądarki oparte na Chromium oraz Firefox działają podobnie. - Tak jak w przypadku Chrome na komputerze, przeglądarka Safari 11.0 na komputery będzie wstępnie wczytywała zakres w całym filmie. Od wersji 11.2 wstępnie wczytywane są tylko metadane filmu. W przeglądarce Safari na iOS filmy wstępnie załadowane.
- Gdy włączony jest Tryb oszczędzania danych
włączona, wartość domyślna
preload
tonone
.
Domyślne zachowania przeglądarki w odniesieniu do strony preload
nie są stałe,
wulgaryzmy to prawdopodobnie najlepszy sposób. W tym przypadku, gdy użytkownik inicjuje
preload="none"
to najprostszy sposób na odroczenie wczytywania filmu
na wszystkich platformach. Atrybut preload
nie jest jedynym sposobem opóźnienia wczytywania
treści wideo. Szybkie odtwarzanie filmów
Wstępne wczytywanie może zapewnić Ci
kilka pomysłów i wskazówek na temat pracy z odtwarzaniem filmów w języku JavaScript.
Niestety nie jest to przydatne, gdy chcesz używać wideo zamiast animowane GIF-y, które omówimy w dalszej części tego artykułu.
Do filmów zastępujących animowany GIF
Animowane pliki GIF są powszechnie wykorzystywane, ale ich jakość nie jest tak wysoka, jak w przypadku zwłaszcza pod względem rozmiaru pliku. Animowane GIF-y mogą rozciągać się na ma zakres kilku megabajtów danych. Filmy o podobnej jakości obrazu zwykle uzyskują być znacznie mniejsza.
Używanie elementu <video>
jako zamiennika animowanego GIF-a nie jest
prosty jak element <img>
. Animowane GIF-y mają 3 cechy:
- Po wczytaniu odtwarzają się automatycznie.
- Powtarzają się w sposób ciągły (chociaż nie zawsze jest to ).
- Nie mają ścieżki audio.
Osiągnięcie tego za pomocą elementu <video>
wygląda mniej więcej tak:
<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>
Atrybuty autoplay
, muted
i loop
nie wymagają wyjaśnień.
Aby autoodtwarzanie było włączone w tych krajach: playsinline
iOS Teraz masz
który działa na różnych platformach. Ale jak to zrobić?
o leniwym ładowaniu? Aby rozpocząć, odpowiednio zmodyfikuj znaczniki <video>
:
<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>
Zauważysz, że funkcja poster
,
który umożliwia podanie obiektu zastępczego zajmującego przestrzeń elementu <video>
aż film będzie się ładować leniwie. Tak jak w przykładach z leniwym ładowaniem (<img>
),
przechowuj adres URL filmu w atrybucie data-src
przy każdym <source>
. Następnie użyj kodu JavaScript podobnego do
Przykłady leniwego ładowania obrazu opartego na obserwacji intersekcji:
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);
});
}
});
W przypadku leniwego ładowania elementu <video>
należy iterować cały element podrzędny
<source>
i zmień ich atrybuty data-src
na atrybuty src
. Jednorazowo
musisz włączyć wczytywanie filmu, wywołując metodę
metody load
elementu, po której multimedia zaczną się automatycznie odtwarzać.
zgodnie z atrybutem autoplay
.
Korzystając z tej metody, otrzymujesz rozwiązanie wideo, które emuluje animowane zachowanie GIF-ów, nie wymagają przy tym tak wysokich ilości danych jak animowane GIF-y, i można je leniwie ładować.
Biblioteki z leniwym ładowaniem
Te biblioteki ułatwiają leniwe ładowanie filmów:
- vanilla-lazyload lozad.js to superproste opcje które korzystają tylko z platformy Intersection Observer. Dzięki temu są one bardzo wydajne, Aby można było ich używać w starszych przeglądarkach, trzeba je wypełnić.
- yall.js to biblioteka, która używa
Obserwujący skrzyżowanie, korzystając z modułów obsługi zdarzeń. Może też leniwie ładować obrazy
poster
filmów za pomocą atrybutudata-poster
. - Jeśli potrzebujesz biblioteki leniwego ładowania w React, możesz: react-lazyload. Choć nie używa obserwacji skrzyżowań, tylko zapewnia znaną metodę leniwego działania. wczytywania obrazów osób przyzwyczajonych do tworzenia aplikacji za pomocą React.
Każda z tych bibliotek leniwego ładowania jest dobrze udokumentowana i zawiera wiele znaczników dla różnych działań z leniwym ładowaniem.