单个页面上的多个视频未加载所有视频的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检查元素中没有错误消息.

我尝试使用JQuery在一段时间间隔内逐个重新加载视频,那时我将在chrome的Inspect元素中获得"临时标题显示"类警告.

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

提前致谢.

Answer 1

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

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

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

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