我在一个页面上加载多个视频,
我的代码片段是这样的,
<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”.