javascript - 如何在一个页面上托管六个以上的 html5 视频播放器？

Question

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

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

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

所以现在我真的很困惑。我不确定如何保证视频在用户点击播放后的合理时间(1-3 秒)内开始播放，而不是超出浏览器的限制。我开始怀疑，鉴于 html5 视频播放器的限制，这是否无法实现。

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

Answer 1

因此，我建议您将预加载设置为none

，而不是打开预加载

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

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

如果您将它们设置为在用户请求之前根本不下载(即单击播放按钮)，那么仍然可能会有一小段延迟。然而，他们最终会减少总体下载量，他们只会下载他们实际观看的视频，并且页面崩溃的可能性要小得多。这对用户来说也更加体贴(想想那些低带宽/节流连接的用户)。

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