43

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

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

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

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

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

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

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

有谁知道这个错误的修复？

4

7 回答 7

21

（这个 bug 在 Chrome 38.0.2125.111、OS X 10.10 中仍然存在）

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

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

按照 Walter 的回答（请参阅错误报告），我按照以下步骤修复了该问题：

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();
            });
    });
}
于 2014-11-05T15:34:45.757 回答
14

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

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

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

于 2013-05-23T13:36:11.700 回答
9

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

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

得到它，并添加它。

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

希望能帮助到你。

于 2013-09-17T19:14:41.260 回答
8

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

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

参考：Javascript：取消/停止图像请求

于 2015-04-19T21:05:56.000 回答
7

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

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

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

于 2015-06-09T09:48:50.420 回答
1

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

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

于 2016-06-30T19:14:28.607 回答
0

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

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

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

于 2020-12-27T07:19:52.363 回答