Question

我是javascript的新手，我不在学校，也不是在工作中这样做，所以我的理解仅限于至少。我一直在使用插件和改变我在网上找到的例子来实现我的目标。我确实找了一个类似的问题，但他们都指向改变源或播放视频，这不是问题。

我有一个视频库文档，它使用视频的迷你版本作为预览，而不是图像。问题是，如果所有视频都预先加载，计算机会在一个文档中超过七百个，咳嗽并死亡。到目前为止我的解决方案如下。

首先，我安装了一个名为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(); 
        }
});

第二个脚本将视频缩略图划分为多个部分，并在单击“显示更多”按钮时一次显示一个部分。

$(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个，并在可见时将预加载状态从none更改为auto。这疯了吗？我是一个新秀，我甚至不知道如何聪明地提出这个问题。请帮忙......

Answer 1

这个简单的示例加载了来自web archive

的视频

它会更改已滚动到视图中的视频的preload属性。

此外，它会在鼠标悬停时播放视频，并在鼠标离开时暂停播放。

确定元素是否在视图中的代码来自this StackOverflow post

＆＃13;

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)

＆＃13;

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

＆＃13;

<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>

＆＃13;

预加载视频（不播放，不更改源，不自动播放）onclick或可见

1 个答案: