HTML5视频元素请求永远保持未更改(在Chrome上)

前端之家收集整理的这篇文章主要介绍了HTML5视频元素请求永远保持未更改(在Chrome上)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在Chrome中有一个奇怪的问题。

每次加载< video>元素,chrome将启动两个HTTP请求。

第一个将永远保持不变(我猜这是“元数据”,“部分内容”请求,但关键是它保持挂起)

第二个到同一个文件是确定,并加载结束后关闭

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

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

我检查重现的问题,它发生在Video.jsMediaElements.js前台。加载网页时打开网络标签,您会看到第一个待处理请求。然后按视频上的播放,您将看到第二个请求工作,但第一个请求将永远保持不变。

有谁知道这个bug的修复?

解决方法

(这个错误仍然存​​在于Chrome 38.0.2125.111,OS X 10.10)

这可能是Chrome的错误&你可以解决它没有任何虚拟的时间后缀的伎俩,只是帮助Chrome释放套接字更快:

我在RevealJs HTML演示文稿上有相同的错误,有20个视频(每个幻灯片一个,在幻灯片焦点上自动播放)。作为副作用,此未释放的套接字问题也影响在同一HTML DOM中紧接着第一个待处理/已阻止视频之后的其他ajax延迟加载媒体。

按照Walter的答案(见bug report),我解决了下面的步骤后的问题:

1-将视频预加载属性设置为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();
            });
    });
}
原文链接:https://www.f2er.com/html5/169722.html

猜你在找的HTML5相关文章