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

【问题标题】：Multiple video's on a single page Not loading all the video's Chrome单个页面上的多个视频未加载所有视频 Chrome
【发布时间】：2014-11-30 09:56:56
【问题描述】：

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

我的代码 sn-p 类似于，

<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 多个视频，所以到时候我会创建那么多视频标签。

每当我在本地主机中尝试此代码时，它都可以正常工作，但如果我在远程服务器中托管此代码并尝试仅加载少数视频，但在我的 chrome 检查元素中没有错误消息。

我尝试使用 JQuery 以一段时间间隔重新加载视频，届时我将在 chrome 的 Inspect 元素中收到“显示临时标题”的警告。

谁能帮我解决这个问题？

提前致谢。

【问题讨论】：

标签： html google-chrome html5-video

【解决方案1】：

Chrome 将视频/音频文件的数量限制为 4 个或 6 个（我不记得是哪个）所以，正如 brianchirls 提到的，您需要设置 preload 属性，尽管您需要将其设置为 @ 987654323@.

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：