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

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

每当我在我的本地主机上尝试这段代码时它工作正常，但如果我在远程服务器上托管这段代码并尝试只加载几个视频，但在我的 chrome inspect 元素中没有错误消息。

我尝试在一段时间内使用 JQuery 一个一个地重新加载视频，那时我将在 chrome 的 Inspect 元素中收到“显示临时 header ”的警告。

谁能帮我解决这个问题？

提前致谢。

Answer 1

Chrome 将视频/音频文件的数量限制为 4 或 6(我不记得是哪个)所以，brianchirls提到，您需要设置 preload 属性，尽管您需要将其设置为 none。

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

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