使用敲除逐步加载视频元数据数组
使用敲除逐步加载视频元数据数组
提问于 2017-07-28 01:04:48
我的页面需要显示由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每增加一次都会重新评估，每次preloadCount更新时都会重新获取src。
如何防止以前的“切换”视频被重新评估？我可以在这里使用一个相对简单的JS解决方案，但如果可以的话，我想利用淘汰赛的优势。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-28 18:37:29
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45363306
复制相关文章
相似问题
腾讯云开发者
