使用淘汰赛逐步加载视频元数据阵列

我的页面需要显示一个网格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

使用淘汰赛逐步加载视频元数据阵列

回答

相关问题