HTML5视频元素请求永远保持待定状态(在Chrome上)

Question

我在Chrome中遇到了一个奇怪的问题.

每次加载<video>元素时,chrome都会启动两个HTTP请求.

第一个将永远保持待定(我猜这是"元数据","部分内容"请求.但关键是它保持待定)

第二个到同一个文件是正常的,并在加载结束后继续和关闭.

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

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

---

我已经检查过重现这个问题,它发生在Video.js和MediaElements.js 前台.加载页面时打开网络选项卡,您将看到第一个待处理的请求.然后按视频上的播放,您将看到第二个请求正常工作,但第一个请求将永久保留.

有谁知道修复这个bug？

Answer 1

(此错误仍存在于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();
            });
    });
}

Answer 2

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

我刚刚在Chromium项目上报告了这个问题并且已经分配了.所以希望它能在不久的将来得到解决.

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

Answer 3

我不知道它现在是否可以正常运行,但我记得通过在视频网址中添加一个参数来解决这个问题,就像"video.mp4？t = 2123"一样.当然,每次加载视频时,参数都应该不同.我用了

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

得到它,并添加它.

有了这个,至少在几个月前,我能够多次播放相同的视频,而Chrome则无法永远等待响应.

希望能帮助到你.

Answer 4

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

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

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

Answer 5

我在动态内容(如轮播)中使用html5视频时发现此问题,以释放您必须卸载视频源的已阻止套接字:

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

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