如何在一个页面上托管超过六个 html5 视频播放器？

Question

我有一个单页网站，我想使用 html5 视频播放器在该网站上最多托管 14 个视频。视频文件都在 80 到 150mbs 之间，我目前将它们托管在 AWS S3 上。

但是，我遇到了一个问题，那就是播放器加载不好。一旦我点击播放，他们通常需要 10 秒才能开始播放。因此，我尝试打开preload 功能（即preload="auto"），但这导致了其他问题。因为页面上有这么多玩家，有些玩家会停顿——我认为是因为当浏览器尝试一次下载太多时，有些玩家会停顿。

为了缓解这个问题，我设置了一个队列来一次预加载三个视频。这行得通，但现在我遇到了另一个问题：Chrome 至少会停止给出一条消息“等待可用的套接字......”我从this 知道这可能是由于对最多六个的限制可以立即打开的 websocket。

所以现在我真的很难过。我不确定如何保证视频在用户点击播放后的合理时间（1-3 秒）内开始播放，而不是最大化浏览器的限制。鉴于 html5 视频播放器的限制，我开始怀疑这是否无法完成。

如果有人对解决方法有任何想法，或者可以改变方法的方式，将不胜感激。

Answer 1

因此，我建议您将 preload 设置为 none

，而不是打开预加载

例如： <video id="myVideo" preload="none">

这样想 - 如果您将 14 个相当大的视频设置为一次全部下载，以便用户可以立即使用它们，那么您最终将没有一个视频真正完全加载。

如果您将它们设置为在用户请求之前完全不下载（即单击播放按钮），那么可能仍然会有一点延迟。但是他们最终会下载更少的内容，他们只会下载他们实际观看的视频，并且页面崩溃的可能性要小得多。这对用户来说也更加体贴（想想那些使用低带宽/限制连接的用户）。

但是，并非所有浏览器都尊重preload="none" 选项，并且无论如何都可能预加载部分视频。最安全但更复杂的方法是在其上放置带有假播放按钮的占位符图像，在用户单击时将视频标签动态插入 DOM。这样您就可以确保在请求之前不会加载任何视频标签。