HTML5视频元素请求永久挂起（在chrome上）

我在Chrome上有一个奇怪的问题

每次我加载

元素时，chrome都会启动两个HTTP请求

第一个将永远挂起（我猜这是“元数据”、“部分内容”请求，但关键是它将一直挂起）

同一文件的第二个文件是ok的，加载结束后继续并关闭

这里的问题是，在我关闭浏览器页面之前，第一个请求一直处于挂起状态。因此，在某个时刻，如果我加载多个视频，Chrome将中断并停止下载任何内容，因为每个可用的请求都被这些挂起的请求占用

我在这里创建了一个简化的测试用例：

---

我已经检查过重现这个问题，它正在和FrontPage上发生。加载页面时打开网络选项卡，您将看到第一个挂起的请求。然后在视频上按play，您将看到第二个请求正在工作，但第一个请求将永远挂起

---

有人知道这个bug的修复方法吗？

显然这是Chrome的bug。这件事没什么可做的

我不久前在Chromium项目上报告了这个问题，它已经被分配了。所以希望它能在不久的将来被修复

---

错误报告：

我不知道它现在是否能正常工作，但我记得通过向视频URL添加一个参数来解决这个问题，就像“video.mp4？t=2123”。当然，每次加载视频时，参数都应该不同。我会用

var parameter = new Date().getMilliseconds(); 

获取并添加它

有了这个，至少在几个月前，我能够多次播放同一个视频，而不用Chrome永远等待响应

---

希望有帮助。

（Chrome38.0.2125.111、OSX10.10中仍然存在此漏洞）

这可能是一个Chrome bug&您可以在不使用任何伪

？时间后缀

技巧的情况下解决它，只需帮助Chrome更快地释放套接字即可：

我在RevealJs HTML演示文稿中也遇到了同样的问题，有20多个视频（每张幻灯片一个，在幻灯片焦点上自动播放）。作为一个副作用，这个未发布的套接字问题还影响了同一HTMLDOM中第一个挂起/阻止的视频之后的其他ajax延迟加载媒体

根据Walter的回答（请参阅），我通过以下步骤解决了这个问题：

1-将视频

preload

属性设置为

none

：

<video preload="none">
    <source src="video.webM" type="video/webM">
</video>

---

这个bug仍然存在。我在单页应用程序上使用HTML5视频播放器。在加载了大约7个带有预缓冲的播放器后，我达到了极限，不再加载视频。我发现另一个答案与图像有关，我惊讶地发现这个答案解决了这个问题

if(window.stop !== undefined) {
    window.stop();
} else if(document.execCommand !== undefined) {
    document.execCommand("Stop", false);
}

---

参考资料：

我在动态内容（如旋转木马）中使用html5视频时发现此问题，要释放被阻止的套接字，必须卸载视频源：

var video = $('#video');
video[0].pause();
video.prop('src','');
video.find('source').remove();
video.remove();

---

这个bug声称已经修复了，但我仍然必须在Chrome42上完成。至少我仍然可以设置preload=“auto”。

我们有相同的症状，但问题是我们连续两次在同一视频上调用

load（）

：相同的视频控制，相同的视频源（MP4）。两个相同的206请求出现在开发工具中，然后，在切换视频几次后，Chrome将取消第一个请求，关闭渐进播放，并等待第二个请求完成

---

还要注意的是，如果您使用的是MP4源，并且它的格式不适合渐进式播放（这意味着MOOV atom位于文件的开头），那么您将有1-2个对该文件的额外请求，这使得它更加混乱。

@sidonaldson的答案是唯一对我有效的答案。然而，我没有删除视频或源。下面的代码对我很有用，在放置正确的src并播放它之前运行它

const video = document.getElementById('player')
      video.pause()
      video.setAttribute('src', '')
      video.load()

---

@ecropolis的回答同样有效，但我的SPA最终将没有图像，因此这不是一个选项。

我在Youtube HTML5视频模式上测试了它，我认为同样的错误也在那里发生……如果你直接请求视频，浏览器是否正确播放它，或者你能观察到同样的行为吗？你的意思是通过

标签直接请求？如果是这样的话，是的，我得到了相同的行为：一个？@nness呢？哦，它在没有挂起的请求的情况下正常工作。我想补充一点，Chrome的连接限制考虑了所有选项卡和窗口，这样一个挂起的请求可能会阻止其他窗口。简而言之：如果Chrome无法播放您的html5视频，有时关闭指向同一主机的其他选项卡就足够了。Chrome 38.0.2125.111、OS X 10.10中仍然存在此漏洞。在Ecropolis的上一篇评论中有一个解决此问题的方法。也许我们应该把它添加到这个被接受的答案中……听起来像是被标记为重复的，它是在2014年11月17日被修复的。我在chrome手机上得到了这个悬而未决的状态行为你，我的朋友，救了我一天。在通过AJAX加载页面内容（包括自动播放html5视频元素）的情况下，我们遇到了Chrome的问题。Chrome会让视频在后台播放（即使在从DOM中删除了完整的元素之后），当我们返回到同一个页面时会出现问题（基本上除了海报图像之外，它不会显示任何内容；直到视频在后台播放完，视频才重新开始播放）。谢谢很高兴我能帮忙！感谢您的评论@GerbenVanDijk！这并不理想，因为它将不得不再次加载，但肯定是一个及时的解决方案-谢谢@adracatching contents。节省带宽。绝对不是一个好的解决方案：-/这和仅仅因为带宽而无法完成应用程序所支持的任务一样糟糕……对我来说，这是可行的，允许浏览器缓存视频并避免重复请求。当我尝试加载多个mp3文件时，我感谢你。这似乎对我有效。但当我转到下一张幻灯片时（其图像正在预加载，并被取消）

const video = document.getElementById('player')
      video.pause()
      video.setAttribute('src', '')
      video.load()