Question

我在一个页面上加载了多个视频，

我的代码段就像，

<div class="video_content left">
    <span style="font-weight:bold">1</span>
    <video  width="213" height="120" controls class="video_tag">
        <source src="<MY VIDEO SOURCE>" type="video/mp4" />
    </video>
</div>
<div class="video_content left">
    <span style="font-weight:bold">2</span>
    <video  width="213" height="120" controls class="video_tag">
        <source src="<MY VIDEO SOURCE>" type="video/mp4" />
    </video>
</div>
<div class="video_content left">
    <span style="font-weight:bold">3</span>
    <video  width="213" height="120" controls class="video_tag">
        <source src="<MY VIDEO SOURCE>" type="video/mp4" />
    </video>
</div>
<div class="video_content left">
    <span style="font-weight:bold">4</span>
    <video  width="213" height="120" controls class="video_tag">
        <source src="<MY VIDEO SOURCE>" type="video/mp4" />
    </video>
</div>

有时我会在一个页面上获得20多个视频，因此我可以创建这么多视频标签。

每当我在localhost中尝试此代码时，它工作正常，但如果我在远程服务器中托管此代码并尝试只加载几个视频，但在我的chrome检查元素中没有错误消息。< / p>

我尝试在一段时间间隔内使用JQuery逐个重新加载视频，那时候我会得到＆＃34;会显示临时标题＆＃34;在chrome的Inspect元素中发出警告。

有人可以帮我解决这个问题吗？

提前致谢。

Answer 1

Chrome将视频/音频文件的数量限制为4或6（我记不起哪个），因此，brianchirls提到，您需要设置preload属性，尽管您需要将其设置为none。

我的建议是为您的所有视频提供海报图片（通过poster属性），并为所有视频设置preload="none"。这样，如果用户主动点击播放按钮，浏览器实际上只会尝试加载它们。

或者，您可以将前4/6个视频设为preload="metadata"，其余视频设为preload="none"。

Answer 2

浏览器可以同时下载大量数据，具体取决于文件的大小以及服务器的速度和距离。尝试为每个视频代码添加preload属性并将其设置为“元数据”。像这样：

<video  width="213" height="120" controls class="video_tag" preload="metadata">

这应该限制浏览器一次加载所有文件的数量，只加载每个视频文件的标题。一旦开始播放，文件的其余部分将加载。如果这不起作用，请尝试将预加载设置为“无”。

此外，您还需要确保远程服务器正在使用HTTP Byte Serving。即，视频文件上的HTTP状态标题应为“206 Partial Content”，而不是“200 OK”。

单个页面上的多个视频未加载所有视频的Chrome

2 个答案: