Chrome 不会加载 HTML5 个视频

Question

我有一个充满视频的培训网站，带有 jquery 导航栏。

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

所有 div 标签都通过 display: none; 隐藏，当用户单击 jquery 导航的某个部分时，共同赞助的 div 标签通过 [= 显示14=]

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

但是 chrome 只是继续处理页面，并没有停止。此外，我 HTML 中的后半部分视频根本无法播放。

所有其他浏览器都会立即加载该页面，并且导航功能完美无缺，可以查看所有可用的视频。

HTML正在显示 5 个视频，代码如下：

            <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 个视频

Chrome Won't Load HTML5 Videos

jquery

google-chrome

html5-video