Question

我的培训网站上有很多带有jquery导航栏的视频。

所有带有文字说明的视频都会加载到自己的div标签中。

所有div标签都通过display: none;隐藏，当用户点击jquery导航的某个部分时，cosponsoring div标签会显示在display: block;

我的整个系统在FireFox，Safari和Internet Explorer中运行良好。

然而，chrome只是继续处理页面并且不会停止。除此之外，我的HTML中的后半部分视频根本无法播放。

每个其他浏览器都会立即加载页面，导航效果很好，可以看到所有可用的视频。

正在使用以下代码显示HTML5视频：

            <video id="video" width="100%" height="auto" controls>

                <source src="6-steps-to-becoming-an-elite-internet-marketer/_/video/mp4/part-4-2-effgijfrcx.mp4" type="video/mp4">
                <source src="6-steps-to-becoming-an-elite-internet-marketer/_/video/ogv/part-4-2-effgijfrcx.ogv" type="video/ogg">

                Oppps! Your browser appears to not be able to play this video. Please update it!

            </video>

Answer 1

此行为非常典型的Chrome。 Chrome正在尝试同时加载所有15个视频，但它只允许与服务器同时打开多个连接。它无法知道要优先考虑哪些视频。

我建议您为所有视频标记添加preload="metadata"。当给定视频可见时，您可以在其上调用.load()以开始缓冲。或者只是开始玩它。

我在面临同样问题的案例研究中有更详细的解释： http://www.pbs.org/pov/blog/povdocs/2014/09/empire-case-study-part-1/

如果用户开始快速连续显示许多视频，则可能仍会遇到问题。在这种情况下，您可能希望通过将src设置为空字符串然后调用.load()来强制隐藏视频来停止缓冲。当该视频再次显示时，您必须再次设置src。

Chrome无法加载HTML5视频

1 个答案: