HTML5 视频元素请求永远保持等待状态（在 chrome 上）答案

【问题标题】：HTML5 video element request stay pending forever (on chrome)HTML5 视频元素请求永远保持等待状态（在 chrome 上）
【发布时间】：2013-04-14 18:44:11
【问题描述】：

我在 Chrome 中有一个奇怪的问题。

每次我加载一个<video> 元素时，chrome 都会启动两个 HTTP 请求。

第一个将永远保持等待状态（我猜这是“元数据”、“部分内容”请求。但关键是它保持等待状态）

同一个文件的第二个没问题，加载结束后继续关闭。

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

我在这里创建了一个简化的测试用例：http://jsbin.com/ixifiq/3

我已经检查以重现该问题，并且它在 Video.js 和 MediaElements.js 头版上都发生了。加载页面时打开您的网络选项卡，您将看到第一个待处理的请求。然后在视频上按播放，您会看到第二个请求有效，但第一个请求将永远处于等待状态。

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

【问题讨论】：

我在 Youtube HTML5 视频模式下进行了测试，我认为那里发生了同样的错误......
如果您直接请求视频，浏览器是否正确播放它，或者您是否可以观察到相同的行为？
你的意思是直接通过<video>标签请求？如果是这样，是的，我有同样的行为：jsbin.com/ixifiq/3
directly linking to the video's URL 怎么样？
@nness 哦，在没有挂起请求的情况下可以正常工作。

标签： html google-chrome html5-video mediaelement.js video.js

【解决方案1】：

（此错误在 Chrome 38.0.2125.111、OS X 10.10 中仍然存在）

这可能是 Chrome 的错误，您可以在没有任何 ?time-suffix 技巧的情况下解决它，只是帮助 Chrome 更快地释放套接字：

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

按照 Walter 的回答（请参阅 bug report），我按照以下步骤解决了该问题：

1-将视频preload属性设置为none：

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

2 - 使用 canplaythrough 事件处理程序在视频加载和准备就绪后播放和/或暂停视频。这有助于 Chrome 释放用于加载该视频的套接字：

function loadVideos(){
    $("video").each(function(index){
            $(this).get(0).load();
            $(this).get(0).addEventListener("canplaythrough", function(){
                this.play();
                this.pause();
            });
    });
}

【讨论】：

这个解决方案对我有用，页面上有十个 webm 格式的 HTML5 视频。不仅页面会完美加载。此外，我可以同时播放任何视频或所有视频。
将此作为评论而不是附加答案发布，归功于@user3368336 我用标签尝试了罗南的解决方案。但是，一旦我尝试在第 7 次同时播放 6 个以上的音频通道并且后面的通道不播放并且在开发人员控制台上它们的状态显示为（待定），它们都完美地加载了。请注意，我说的不是<video，而是<audio>，因为它们都是媒体元素，我认为我应该让你知道，我也愿意接受任何关于我的问题的想法。

【解决方案2】：

显然这是 Chrome 的一个错误。而且它与 ATM 无关。

我不久前在 Chromium 项目上报告了该问题，并且已将其分配。所以希望它会在不久的将来得到修复。

错误报告：https://code.google.com/p/chromium/issues/detail?id=234779

【讨论】：

我想补充一点，Chrome 的连接限制会考虑所有选项卡和窗口——因此一个待处理的请求也可能会阻止其他窗口。简而言之：如果 Chrome 无法播放您的 html5 视频，有时关闭指向同一主机的其他选项卡就足够了。
Chrome 38.0.2125.111、OS X 10.10 中仍然存在此错误
在 Ecropolis 的最后一条评论中有解决这个问题的方法。也许我们应该将它添加到这个已接受的答案中......
听起来像 #234779 被标记为与 #31014 重复，该问题已在 2014 年 11 月 17 日修复。
stackoverflow.com/questions/68000901/… 我在 chrome 移动设备上得到了这个挂起的状态行为

【解决方案3】：

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

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

获取它并添加它。

至少几个月前，有了这个，我可以多次播放同一视频，而 Chrome 不会永远等待响应。

希望对你有帮助。

【讨论】：

你，我的朋友，拯救了我的一天。在通过 AJAX 加载页面内容（包括自动播放的 html5 视频元素）的情况下，我们遇到了 Chrome 的问题。 Chrome 会保持视频在后台播放（即使在从 DOM 中删除完整元素之后），当我们返回同一页面时会导致问题（基本上除了海报图像之外它没有显示任何内容；直到视频播放完毕背景，之后视频再次开始播放）。谢谢！
很高兴能帮上忙！感谢您的评论@GerbenVanDijk！
不太理想，因为它必须再次加载，但绝对是一个及时的解决方案 - 感谢@Adracat
缓存内容是有意义的。也节省带宽。绝对不是一个好的解决方案：-/
仅仅因为带宽而不能做应用程序应该做的事情一样糟糕......

【解决方案4】：

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

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

参考：Javascript: Cancel/Stop Image Requests

【讨论】：

对我来说这是可行的，并且允许浏览器缓存视频并避免重复请求。谢谢
在尝试加载多个 mp3 文件时为我工作。
这似乎对我有用。但是当我转到下一张幻灯片（其图像正在预加载并被取消）时，您如何让浏览器重试加载现在可见的图像？现在它显示一个损坏的图片链接。

【解决方案5】：

我在轮播等动态内容中使用 html5 视频时发现了这个问题，要释放阻塞的套接字，您必须卸载视频源：

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

该错误声称已修复，但我仍然必须在 Chrome 42 上执行此操作。至少我仍然可以设置 preload="auto"。

【讨论】：

你也应该按照w3.org/html/wg/drafts/html/master/…video.load()@
谢谢，这对我有用。我在模态中有一个视频，它每次都会创建
@Lodewijk：似乎不能信任 W3C 使用不会消失的 URL。最新信息html.spec.whatwg.org/…
这应该是那个绿色检查的答案，因为它是唯一有效的！谢谢！

【解决方案6】：

我们有同样的症状，但问题是我们在同一个视频上连续两次调用load()：同一个视频控件，同一个视频源 (MP4)。开发工具中出现了两个相同的 206 请求，然后，在切换视频几次后，Chrome 会取消第一个请求，关闭渐进式播放，并等待第二个请求完成。

另外请注意，如果您使用的是 MP4 源并且它没有被格式化为渐进式播放（意味着 MOOV atom 位于文件的开头），那么您将有 1-2 个额外的文件请求，这使它更加混乱。

【讨论】：

【解决方案7】：

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

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

@ecropolis 的回答也有效，但我的 SPA 最终会没有图像，所以它不是一个选项。

【讨论】：