預加載視頻（不播放，不更改來源，不自動播放）onclick或當可見時

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

第二個腳本將視頻縮略圖分爲多個部分，並在單擊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(); 
    }); 
    }); 
}); 

現在這樣做的工作，如果我將所有的視頻縮略圖預加載=無，但隨後的縮略圖顯示不出來，除非您首先將鼠標懸停它。我想一次顯示24個，並且在可見時將預加載狀態從無更改爲自動。這是瘋了嗎？我是一個新秀，我甚至不知道如何聰明地問這個問題。請幫助...

Answer 1

這個簡單的例子來自web archive

它改變了preload屬性已滾動到視圖視頻加載了視頻。

此外，它在鼠標上播放視頻，並在鼠標離開時暫停。

用於確定該元素在視圖中的代碼來自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>