preload video (not play, not change source, not autoplay) onclick or when visible

Question

i am very new to javascript, am not in school, nor do i do this on a job, so my understanding is limited to say the least. I have been using plugins and altering examples i find online to accomplish my goals. i did look for a similar question, but they all point to changing source or playing the video, which is not the problem.

I have a video gallery document which uses mini versions of the video as previews, not images. problem is, with over seven hundred of them on one document, the computer coughs up a lung and dies if all the videos are preloaded. my solution so far is as follows.

first, i installed a lazyloading plugin called b-lazy, which stutters after a few of them are displayed in firefox, and stops displaying them.

the first script plays the video thumbnail when you hover over it.

$(window).load(function(){
$(document).ready(function() {       
        $('.b-lazy').each(function(i, obj) {
            $(this).on("mouseover", function() { hoverVideo(i); });
            $(this).on("mouseout", function() { hideVideo(i); });
        });
});

        function hoverVideo(i) {  
            $('.b-lazy')[i].play(); 
        }

        function hideVideo(i) {
                $('.b-lazy')[i].pause(); 
        }
});

the second script divides the video thumbnails into sections, and displays these sections one at a time when the show more button is clicked.

$(window).load(function(){
$(document).ready(function () {
    shazam = $("#vidlist .divider").size();
    x=0;
    $('#vidlist .divider:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+1 <= shazam) ? x+1 : shazam;
        $('#vidlist .divider:lt('+x+')').show();
    });
  });
});

now this does work if i set all the video thumbnails to preload=none, but then the thumbnail doesn't show up unless you hover the mouse over it first. i want to display 24 of these at a time, and change the preload state from none to auto when visible. is this crazy? i am such a rookie that i don't even know how to ask the question intelligently. please help...

Answer 1

This simple example loads up videos from the web archive

It changes the preload property for videos that have been scrolled into view.

Additionally it plays the video on mouse over, and pauses it on mouse leave.

The code for determining if the element is in view comes from this StackOverflow post

let videos = document.querySelectorAll('.videos video');
function play(){
  this.play();
}

function stop(){
  this.pause();
}

function setPreload() {
  for (let i = videos.length; i--;) {
    if (visibleY(videos[i])){
      videos[i].preload = "auto"; 
    }
  }
}

// code from https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling#answer-21627295
var visibleY = function(el){
  var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height, 
    el = el.parentNode;
  do {
    rect = el.getBoundingClientRect();
    if (top <= rect.bottom === false) return false;
    // Check if the element is out of view due to a container scrolling
    if ((top + height) <= rect.top) return false
    el = el.parentNode;
  } while (el != document.body);
  // Check its within the document viewport
  return top <= document.documentElement.clientHeight;
};


setPreload()
for (let i = videos.length; i--;){
  videos[i].addEventListener('mouseover', play);
  videos[i].addEventListener('mouseleave', stop);
}
window.addEventListener('scroll', setPreload)

.videos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.videos video {
  flex: 1;
  min-width: 200px;
  height: 240px;
  padding: 5px;
  border: 1px solid;
}

<div class="videos grid">
  <video src="https://archive.org/download/suddenly/suddenly_512kb.mp4" preload="none" controls></video>

  <video src="https://archive.org/download/doa_1949/doa_1949_512kb.mp4" preload="none" controls></video>

  <video src="https://archive.org/download/TheStranger_0/The_Stranger_512kb.mp4" preload="none" controls></video>

  <video src="https://archive.org/download/impact/impact_512kb.mp4" preload="none" controls></video>

  <video src="https://archive.org/download/ScarletStreet/Scarlet_Street_512kb.mp4" preload="none" controls></video>

  <video src="https://archive.org/download/TooLateForTears/Too_Late_for_Tears_1949.mp4" preload="none" controls></video>

  <video src="https://archive.org/download/Detour/Detour_512kb.mp4" preload="none" controls></video>

  <video src="https://archive.org/download/Quicksand_clear/Quicksand_512kb.mp4" preload="none" controls></video>

  <video src="https://archive.org/download/Saint_Louis_Bank_Robbery/Saint_Louis_Bank_Robbery_512kb.mp4" preload="none" controls></video>

</div>