How to Lazy Load Html Videos

Introduction

In this article, we are going to look at how to lazy load Html videos.

Steps we'll cover:

• What Does Lazy Loading Mean?

• Examples Of Lazy Loading.

• Code To Prevent Preloading.

• How To Customize Video Thumbnail Until The User Begins Playback.

• Free Lazy Loading Javascript Libraries You Should Try Out.

What Does Lazy Loading Mean?

lazy loading (also known as asynchronous or on-demand loading) is an optimization technique mostly used in web design and web development whereby the browser does not request certain resources until the user interacts in such a way that the resources are needed.

You might be wondering, "How will this lazy loading improve my website?"🤔 or "why do I have to implement lazy loading into my website at all?"🤔. The following are the answers to these questions about the advantages of lazy loading:

• Lazy loading improves performance:

  Lazy loading improves performance, and I'll explain why website performance is so important. The speed with which a browser can load a fully functional webpage from a given site is referred to as performance or website performance.

  The success of any online venture is heavily reliant on performance. Poor-performing sites drive away users, whereas high-performing sites engage and retain them. You can see why you might have to lazy load your site now.

• Improved SEO:

  Search engines cannot crawl the entire webpage if there is a delay in page loading. This simply means that there will be a delay and that rankings will not appear at the top. This is where lazy loading comes in handy, ensuring that the most important content is displayed first, thereby improving your website's ranking.

  You can also provide links to the lazy loaded content so that even if the entire content is not loaded, with the links provided, the user can still access the data that they want.

  Remember how we defined lazy loading? "The browser will not request specific resources until the user interacts in such a way that the resources are required", I explained. This definition of lazy loading is perfectly illustrated by the scenario above.

Example Of Lazy Loading

This section of the article will look at examples of lazy loading, but because the focus of this article is video lazy loading, I'll limit this example to video lazy loading only. If you want to learn how to lazy load other types of content, such as images, check out the resource below:

Lazy loading images complete guide

Have you ever seen something like this on a website? 👀 where you must manually click the playback button before the browser begins downloading the video. Look at the gif below:

If so, I'm pleased to inform you that video lazy loading has been implemented on that page. Why do you have to click the playback button yourself? Why not just let the videos play automatically? These questions will be addressed in the following paragraph.

Although the HTML <video> tag by default allows the browser to preload and auto-play your video, auto-playing your video causes your webpage to load slower. That is why, to lazy load your videos, we must prevent preloading.

Code To Prevent Preloading

The preload attribute of the video element can be used to prevent the preloading of HTML videos. To lazy load your videos, follow these two steps:

Step 1: Set preload to "none".

Step 2: Make sure that the auto-play attribute is not set otherwise the browser will need to start loading the video and preload = "none" will not work.

Here's an example of the code:

<!-- disable preloading -->
<video controls preload="none" width="300">
    <source src="files/sample.mp4" type="video/mp4">
</video>

Here's an example of what your browser should display:

Depending on your browser, the video will display a white or black area. In my case, it displays a black area, as seen in the image above; additionally, it is not visually appealing, which may lead to low user engagement. So, how do we address this? Html allows us to customize our thumbnails and use them as video previews (leading to better user engagement).

How To Customize Video Thumbnail Until The User Begins Playback

To customize video thumbnails the poster attribute gives the video element a placeholder that will occupy the space until the user begins playback. In any case, don't be concerned about what happens to the "play" icon; the browser itself will insert the "play" icon in the center of the image.

Show the poster as a thumbnail

• To show the poster as the thumbnail check out the code snippet and result below:

    <video controls preload="none" poster="img/cover.jpg" width="300">
        <source src="files/sample.mp4" type="video/mp4">
    </video>
  

  

  To achieve the same result as the image above, I recommend using a thumbnail image the size of the video.

Free Lazy Loading Javascript Libraries You Should Try Out

JS libraries contain various functions (or lines of code) for performing specific tasks on a web page.

You can use these free lazy loading javascript libraries to save time and ease your programming workload.

• Vanilla-lazyload :

  • Written in plain "vanilla" javascript.

  • leverages Intersectionbserver.

  • Optimizes your website for slower connection and can enable native lazy loading.

• Lozad.js :

  • Lazy loads elements performantly using pure javascript.

  • It's a lightweight library.

  • Allows lazy loading of dynamically added elements as well.

  • has no dependencies.

  • is completely free and open source.

• Yall.js(Yet Another Lazy Loader) :

  • an SEO-friendly lazy loader for <video elements as well as CSS background images.

  • work in all modern browsers.

  • uses intersection observer where available.

  • can also lazy load video poster images.

• React-lazyload :

  • lazy load your components, images or anything that matters the performance.

  • Supports one-time lazy load and continuous lazy load mode.

  • Server-side rendering friendly.

  • Thoroughly tested.

Conclusion

In this article, I began by explaining what lazy loading is, followed by a quick walkthrough of examples of lazy loading, limiting it to video lazy loading and providing a resource for those who may want to learn how to lazy load other types of content. Then we talked about the code to prevent preloading and how to customize video thumbnails until the user starts playing. Finally, we examined some free lazy loading javascript libraries that you should try.