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

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

我的代码片段是这样的,

<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元素中获得“临时标题显示”类警告.

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

提前致谢.

解决方法

Chrome将视频/音频文件的数量限制为4或6(我记不起哪个),因此,正如 brianchirls所提到的,您需要设置preload属性,尽管您需要将其设置为none.

我的建议是为你的所有视频提供海报图片(通过海报属性),并为所有视频设置preload =“none”.这样,如果用户主动点击播放按钮,浏览器实际上只会尝试加载它们.

或者,您可以使用preload =“metadata”设置前4/6视频,其余视图设置为preload =“none”.

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码