单个页面上的多个视频不加载所有视频的Chrome [英] Multiple video's on a single page Not loading all the video's Chrome

问题描述

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

我的代码片段类似于

 < div class =video_content left> 
< span style =font-weight：bold> 1< / span> 
< video width =213height =120controls 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 =213height =120controls 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 =213height =120controls 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 =213height =120controls class =video_tag> 
< source src =< MY VIDEO SOURCE> type =video / mp4/> 
< / video> 
< / div> 
  

有时我会在单个页面上获得20多个视频，所以我会创建这些视频很多视频标签。

每当我在我的本地主机上试用这段代码时，它都能正常工作，但是如果我将这段代码放在远程服务器上并尝试只加载少量视频，在我的chrome inspect元素中没有错误信息。

我试着用一段时间间隔使用jQuery重新加载视频，那时候我会得到临时头文件会显示在chrome的Inspect元素中。警告。

任何人都可以帮我解决这个问题吗？

Chrome浏览器将视频/音频文件的数量限制为4或6个（我不能请记住哪个），因此，如 brianchirls 所述，您需要设置预加载属性，尽管你需要将它设置为 none 。

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

或者，您可以使用 preload =metadata设置第一个4/6视频，其余的为 preload =none。

I'm loading multiple video's on a single page,

My code snippet is something like,

<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>

Sometimes I'll get 20+ video's on a single page, so that time I'll create those many video tags.

Whenever I try this code in my localhost it works fine, but if I host this code in remote server and try only few video's will be loading, but in my chrome inspect element there is no error message.

I tried re-loading video's one by one using JQuery with some time interval, that time I'll be getting "Provisional headers are shown" kind of warning in chrome's Inspect element.

Could anyone please help me to fix this issue?

Thanks in advance.

解决方案

Chrome limits the number of videos/audio files to 4 or 6 (I can't remember which) so, as brianchirls mentions, you need to set the preload attribute, although you need to set it to none.

My recommendation is to provide a poster image (via the poster attribute) for all your videos and to set preload="none" to all of them. That way the browser only actually tries to load them if the user actively clicks the play button.

Alternatively you could set the first 4/6 videos with preload="metadata" and the rest to preload="none".

这篇关于单个页面上的多个视频不加载所有视频的Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！