我有一个单页网站,我想使用html5视频播放器托管多达14个视频。视频文件都在80到150mb之间,我目前正在AWS S3上托管它们。
然而,我遇到了一个问题,即玩家负载不好。点击播放后,他们通常需要10秒才能开始播放。因此,我尝试启用preload
功能(即preload =" auto"),但这会导致其他问题。因为页面上有这么多玩家,一些玩家失速 - 我认为因为当浏览器试图同时下载太多时,有些玩家会停滞不前。
为了缓解这个问题,我设置了一个队列来一次预加载三个视频。这样做有效,但现在我遇到了另一个问题:Chrome至少会停止发出消息"等待可用的套接字......"我从this知道这可能是由于最多可以同时打开六个websockets的限制。
所以现在我真的很难过。我不确定如何保证视频在用户点击播放后的合理时间(1-3秒)内开始播放,并且不会超出浏览器的限制。考虑到html5视频播放器的限制,我开始怀疑这是不是可以完成。
如果有人对解决方法有任何想法,或者可以改变方法的方法,那将非常感激。
答案 0 :(得分:2)
因此,我建议您将预加载设置为无
,而不是打开预加载 e.g:
<video id="myVideo" preload="none">
以这种方式思考 - 如果您将14个相当大的视频设置为同时进行所有下载,那么它们立即可供用户使用,您最终将看不到任何一个视频实际上已完全加载。
如果您将它们设置为根本不下载,直到用户请求一个(即点击播放按钮),则可能仍然存在小的延迟。然而,他们最终整体下载量较少,他们只会下载他们实际观看的视频,而且页面崩溃的可能性要小得多。这对用户来说也更为体贴(想想那些低带宽/节流连接)。
但是,并非所有浏览器都尊重preload="none"
选项,并且可能会预先加载部分视频。最安全但更复杂的方法是在其上放置带有虚假播放按钮的占位符图像,在用户点击时动态地将视频标签插入DOM。这样,您可以确保在请求之前不会加载任何视频标记。