I've been experimenting with lazy loading videos using jQuery. While I've had success with lazy loading images and background-images using the same technique, I ran into issues when trying to apply it to videos. Here's what I've tried so far:
- Changed the source src attribute to data-src attribute
- Upon dom ready, changed data-src attribute back to src with the same values
Below is the code snippet:
HTML
<div class="video-section">
<video muted loop autoplay preload="auto">
<source data-src="hello.mp4" type="video/mp4">
</video>
</div>
Javascript
let video_url=$("video source").attr("data-src");
$("video source").attr("src",video_url);