我有一个用户可以播放的视频网格。嵌入了以下内容的YouTube视频列表中的内容：
<video data-bind="attr: {src: mediaPath}" preload="metadata"></video>
在某个时刻，我开始在Chrome中看到以下内容：
等待可用的套接字......
我认为这是由于此处列出的问题所致：Chrome hangs after certain amount of data transfered - waiting for available socket
但是我不确定解决方案是什么，因为用户在浏览媒体时可能会看到10或100个“预览”。
我想到的一件事是最初加载为preload='none'，然后将视频一次更改为preload='metadata'，直到所有元数据都已加载，但我想问一下社区在开始这样一个臭味的努力之前。
至于用户体验 - 视频的缩略图非常小，其中大约30个在任何特定时间都是“首屏”。
答案 0 :(得分：0)
正如Offbeatmammal所说，此类视频网格或列表的常用方法是加载海报图片而不是视频，然后在用户点击或悬停时加载视频。
如果您的服务器解决方案支持，您还可以在悬停时单独预览视频并点击完整视频。
有些网页会有一个“主要”视频，并附有许多缩略图，主视频通常会预先加载，而其他网页只会有缩略图。
你可以根据自己的意愿或需要使解决方案变得复杂（或臭，优秀，BTW！） - 例如，您可能需要一些算法来监控和预测特定的用户行为，以及他们是否始终关注第一个在页面上的2和3，预加载这些以加快他们的体验。
另外，在具有单个主视频和许多缩略图的页面上，视频预加载通常相当高效且不会产生太多开销，特别是对于流式视频，只要足够启动它就可以下载，但缩略图可以是一个相当大的开销，或至少是一个很好的优化目标。您经常会看到网站限制缩略图的数量以减少数据传输量并具有某种“点击更多”或滚动机制以允许用户请求更多。