使用淘汰賽逐步加載視頻元數據陣列

我的頁面需要顯示一個網格n視頻預覽。瀏覽器只能與任何給定域有5-6個活動連接。爲了防止「等待套接字連接...」問題，我試圖逐步加載視頻元數據。使用淘汰賽逐步加載視頻元數據陣列

我有以下幾點：

<!-- ko foreach: videos() --> 
    <video data-bind="attr: {src: mediaPath, preload: $parent.preloadCount() > $index() ? 'metadata' : 'none'}, event: {loadedmetadata: $parent.incrementPreloadCount}"></video> 
<!--/ko-->

在我的視圖模型：

vm.preloadCount = ko.observable(4); 
    vm.incrementPreloadCount = function() { 
     feedVm.preloadCount(feedVm.preloadCount() + 1); 
    };

的想法是，每一個視頻的元數據被加載時，loadedmetadata事件觸發關閉該逐步切換none增量到metadata。

問題在於我的videos正在重新評估每個增量，每次更新src時都要重新評估。

如何防止以前「切換」的視頻被重新評估？我可以求助於一個相對簡單的JS解決方案，但如果可以的話，我想利用淘汰賽。

來源

2017-07-28 SB2055

在給定標記的唯一潛在的問題是用於'preload'屬性，它automaticaly轉換爲'由KO computed'表達。但通常「計算」只有在其值實際發生變化時纔會重新評估。所以我想在後面還有另一個問題。你能否創建能夠重現問題的功能性示例？ –

@f_martinez - 'preloadCount'是什麼在改變和觸發重新評估afaik – SB2055

您的比較（'$ parent.preloadCount（）> $ index（）'）應該是每個視頻的「計算」。 –

map爲其功能提供第二個參數，該參數是正在操作的元素的索引。您可以在計算結果中將它用作$index的替代品，該計算結果返回數組的地圖。

使計算處理preload屬性值應保持您的視頻元素不被觸摸，除非計算的值發生更改。

const vm = { 
 
    arr: ['one', 'two', 'three', 'four', 'five'], 
 
    preloadCount: ko.observable(0) 
 
}; 
 

 
vm.videos = ko.computed(() => vm.arr.map((v, i) => ({ 
 
    v, 
 
    i, 
 
    preload: ko.computed(() => vm.preloadCount() > i ? 'metadata' : 'none') 
 
}))); 
 

 
ko.applyBindings(vm); 
 

 
setInterval(() => vm.preloadCount(1 + vm.preloadCount()), 1200);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<div data-bind="foreach: videos"> 
 
    <div> 
 
    <span data-bind="text: i"></span> 
 
    <span data-bind="text: v"></span> 
 
    <span data-bind="text: preload"></span> 
 
    </div> 
 
</div>

來源

2017-07-28 18:37:29

使用淘汰賽逐步加載視頻元數據陣列

回答

相關問題