预加载视频(不播放，不改变源，不自动播放)点击或可见时

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

本文关键字：视频 加载 播放 改变 自动播放      更新时间：2023-09-26

我对javascript很陌生，我不是在学校，也不是在工作中这样做，所以我的理解是有限的，至少可以说。我一直在使用插件和修改我在网上找到的例子来完成我的目标。我确实找了一个类似的问题，但他们都指出改变来源或播放视频，这不是问题。

我有一个视频库文档，它使用视频的迷你版本作为预览，而不是图像。问题是，一个文件里有超过700个视频，如果所有的视频都是预先加载的，电脑就会咳出肺，然后死机。到目前为止，我的解决方案如下。

首先，我安装了一个名为b-lazy的懒惰加载插件，它在firefox中显示其中一些后会出现口吃，然后停止显示。

当你将鼠标悬停在视频缩略图上时，第一个脚本会播放视频缩略图。

$(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(); 
        }
});

第二个脚本将视频缩略图分成几个部分，并在单击show more按钮时一次一个地显示这些部分。

$(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();
    });
  });
});

如果我将所有视频缩略图设置为preload=none，那么缩略图不会显示，除非你先将鼠标悬停在它上面。我想一次显示其中的24个，并在可见时将预加载状态从无更改为自动。这很疯狂吗?我是一个新手，我甚至不知道如何聪明地提出这个问题。请帮助…

这个简单的例子从web存档中加载视频

它改变了已经滚动到视图中的视频的preload属性。

此外，它播放视频鼠标经过，并暂停鼠标离开。

确定元素是否在视图中的代码来自这个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>

相关文章：