As with image elements, you can also lazy-load video. Videos are commonly loaded with the <video> element (although an
alternate method using
<img> has
emerged with limited implementation). How to lazy-load <video> depends on the
use case, though. Let's discuss a couple of scenarios that each require a
different solution.
For video that doesn't autoplay
For videos where playback is initiated by the user (that is, videos that don't
autoplay), specifying the preload
attribute
on the <video> element may be desirable:
<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>
The example above uses a preload attribute with a value of none to prevent browsers
from preloading any video data. The poster
attribute gives the <video> element a placeholder that will occupy the space while the video loads. The reason for this is
that default behaviors for loading video can vary from browser to browser:
- In Chrome, the default for
preloadused to beauto, but as of Chrome 64, it now defaults tometadata. Even so, on the desktop version of Chrome, a portion of the video may be preloaded using theContent-Rangeheader. Other Chromium-based browsers and Firefox behave similarly. - As with Chrome on desktop, 11.0 desktop versions of Safari will preload a range of the video. From version 11.2, only the video metadata is preloaded. In Safari on iOS, videos are never preloaded.
- When Data Saver mode is
enabled,
preloaddefaults tonone.
Because browser default behaviors with regard to preload are not set in stone,
being explicit is probably your best bet. In this cases where the user initiates
playback, using preload="none" is the easiest way to defer loading of video on
all platforms. The preload attribute isn't the only way to defer the loading
of video content. Fast Playback with Video
Preload may give you
some ideas and insight into working with video playback in JavaScript.
Unfortunately, it doesn't prove useful when you want to use video in place of animated GIFs, which is covered next.
For video acting as an animated GIF replacement
While animated GIFs enjoy wide use, they're subpar to video equivalents in a number of ways, particularly in file size. Animated GIFs can stretch into the range of several megabytes of data. Videos of similar visual quality tend to be far smaller.
Using the <video> element as a replacement for animated GIF is not as
straightforward as the <img> element. Animated GIFs have three characteristics:
- They play automatically when loaded.
- They loop continuously (though that's not always the case).
- They don't have an audio track.
Achieving this with the <video> element looks something like this:
<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>
The autoplay, muted, and loop attributes are self-explanatory.
playsinline is necessary for autoplaying to occur in
iOS. Now you have a
serviceable video-as-GIF replacement that works across platforms. But how to go
about lazy loading it? To start, modify your <video> markup accordingly:
<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>
You'll notice the addition of the poster
attribute,
which lets you specify a placeholder to occupy the <video> element's space
until the video is lazy-loaded. As with the <img> lazy-loading examples,
stash the video URL in the data-src attribute on each <source>
element. From there, use JavaScript code similar to the
Intersection Observer-based image lazy loading examples:
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);
});
}
});
When you lazy-load a <video> element, you need to iterate through all of the child
<source> elements and flip their data-src attributes to src attributes. Once
you've done that, you need to trigger loading of the video by calling the
element's load method, after which the media will begin playing automatically
per the autoplay attribute.
Using this method, you have a video solution that emulates animated GIF behavior, but doesn't incur the same intensive data usage as animated GIFs do, and you can lazy-load that content.
Lazy loading libraries
The following libraries can help you to lazy-load video:
- vanilla-lazyload and lozad.js are super lightweight options that use Intersection Observer only. As such, they are highly performant, but will need to be polyfilled before you can use them on older browsers.
- yall.js is a library that uses
Intersection Observer and falls back to event handlers. It can also lazy load video
posterimages using adata-posterattribute. - If you need a React-specific lazy loading library, you might consider react-lazyload. While it doesn't use Intersection Observer, it does provide a familiar method of lazy loading images for those accustomed to developing applications with React.
Each of these lazy loading libraries is well documented, with plenty of markup patterns for your various lazy loading endeavors.