页面上许多视频中的Internet Explorer和Edge中的视频，内存管理问题，导致它们显示为暗/黑和/或无法播放 [英] Video, memory management problems in Internet Explorer and Edge from many videos on page causing them to display dark/black and/or not play

问题描述

我们有一个页面，其中包含77个左右的视频缩略图.将视频缩略图悬停后，视频将在缩略图空间内开始播放.

We have a page that contains 77 or so video thumbnails. When a video thumbnail is hovered over, video starts playing within the thumbnail space.

将它们悬停在许多(取决于系统/浏览器的8至60)之后，就会出现问题.视频开始播放错误或无法播放.基本上，平坦/多余的区域变暗了.在Edge中，这会在一两秒后自行纠正，但是对于我们的客户而言，这是非常不希望的行为.

A problem occurs after many (8 to 60 depending on the system/browser) of them get hovered over. The video starts playing incorrectly, or not playing. Basically the flat/redundant areas turn all dark. In Edge, this corrects itself after a second or two, but for our client this is very undesirable behavior.

我们通过以下方法进行了改进:调用pause()，删除src属性，然后在具有空src属性的元素上调用load()，以暂停鼠标上的每个视频，如下所示:

We made an improvement by pausing each video on mouse out by calling pause(), removing the src attribute, and then calling load() on the element with an empty src attribute, like so:

 function pauseVideo(e) {
     $('video', this).get(0).pause();
     $('video', this).get(0).removeAttribute('src');
     $('video', this).get(0).load();
 }

这可以清除一些内存，但是问题仍然存在，尽管在问题出现之前可以播放更多的视频.

This clears up some memory, but the issue still occurs, though more of the videos can play before the problem becomes apparent.

我似乎与内存有关，并向我们展示了Microsoft浏览器中的内存泄漏.每个视频都增加了内存使用量，并且内存从未被清除，就像在Chrome和Firefox中那样.当任务管理器中的内存使用量接近600mb至1gb(取决于系统)时，通常会发生此问题. (Chrome的总容量约为500-550 MB. Firefox大约有700-800 MB.)

I does appear to have something to do with memory, and exposes what appears to us to be a memory leak within the Microsoft browsers. Each video increases memory usage, and the memory never gets cleared, as it seems to in Chrome and Firefox. The problem usually occurs when memory usage approaches somewhere between 600mb to 1gb (depending on system) in the task manager. (Chrome always sits around ~500-550 megabytes. Firefox sits around ~700-800 megabytes.)

我们注意到，这种行为何时开始发生取决于视频卡，但问题总是在某个时候出现.

We noticed some variance on when the behavior starts to occur that depends on video cards, but the issue always become present at some point.

所有这些视频都显示在页面上的多个位置.所以我想知道的一件事是，是否可以在元素之间共享视频内存.

All of these videos are showed in multiple places on the page. So one thing I was wondering was if it is possible to share video memory between elements.

还有一些其他可能相关的问题.在IE中，视频会完全变黑，并且它们的尺寸会在屏幕上改变，这可能会更改页面布局.

There are a couple other issues that may be related. In IE the videos go completely black, and their dimensions change onscreen which can change the page layout.

这是一个与相关的问题，但这不是重复，因为它没有提供有关必须播放80多个视频的问题或解决方案一页:如何正确卸载/销毁VIDEO元素

Here is a related issue, but it is not a duplicate, as it doesn't not provide a question or solution about having to facilitate 80 or so videos on one page: How to properly unload/destroy a VIDEO element

我们正在测试IE版本11.228.17134.0和Edge版本42.17134.1.0，它们都是最新版本.

We're testing on IE version 11.228.17134.0 and Edge version 42.17134.1.0, both currently the latest.

最初所需的功能是当用户将鼠标从视频上移开时将视频停在框架上，但是现在看来，如果我们必须卸载视频，我们将无法做到这一点.

The desired functionality originally was for the videos to pause on the frame when the user moused off the video, but right now appears we wont be able to do that if we have to unload the video.

我将全天提供有关此问题的更多信息.

I will be adding more information about this issue throughout the day as it becomes available.

推荐答案

我们的团队拥有一个脚本，该脚本可检测DOM元素是否在页面的可见区域内，例如不能滚动到顶部上方或底部下方.当用户滚动时，脚本会添加/删除类，并为添加了行为的每个元素调度自定义事件.我能够利用该系统暂停，删除和处置(垃圾收集)不可见的视频元素，然后在它们重新出现时重新填充它们，并将原始属性存储在与之关联的对象数组中每个视频/缩略图.

Our team has a script that detects if DOM elements are within the viewable area on the page, e.i. not scrolled above the top or below the bottom. As the user scrolls, the script adds/removes a class, and dispatches custom events for each element that has the behavior added. I was able to leverage this system to pause, remove, and dispose (garbage collect) video elements that are not in view, and then, repopulate them as they come back into view, with the original properties stored in an array of objects associated with each video/thumbnail.

这将处理视频.该函数必须用.call()调用，例如:disposeVideo.call(videoElement);

This disposes the video. The function must be called with .call(), like: disposeVideo.call(videoElement);

var disposeVideo = function () {
  this.pause();
  delete(this);
  $(this).remove();
}

奇怪的是，尽管我已经阅读了有关此问题的评论以及我在IE中的发现，但是delete(this)是一个hack，并且不应该在任何浏览器中运行，但它似乎可以在所有浏览器中运行. /Edge.

It's odd that though delete(this) is a hack, and shouldn't work in any browser, it appears to work in all browsers, according to comments I've read around this issue, and my findings in IE/Edge.

在IE(不是Edge)上，这具有减慢页面滚动速度的副作用.这是由于我们对页面上的80个项目应用了我们的视图中检查，或者是与重新下载海报(缩略图)和视频有关，因为这似乎并没有有效地将这些资产立即缓存(重新)提供给渲染器.

On IE (not Edge) this has a side effect of slowing down page scrolling. This is caused by the our in-view checking applied to 80 items on the page, or if it is to do with re-downloading posters (thumbnail images) and video, because it does appear to not be effectively caching these assets to be immediately (re)available to the renderer.

与上述相关的另一个副作用(在IE中也是如此)是，当您滚动视频时，视频将显示为空白，直到重新下载资产.我们选择使用在视频后面分层的图像，以便对被删除的视频元素使用poster属性.这样一来，屏幕上就不会出现空白的视频缩略图.

Another side effect (also in IE) related to the above, is that as you scroll the videos appear blank until assets are re-downloaded. We're opting to use images layered behind the videos in favor of using the poster attribute for the videos elements that get removed. This way there will never be blank video thumbnails onscreen.

这篇关于页面上许多视频中的Internet Explorer和Edge中的视频，内存管理问题，导致它们显示为暗/黑和/或无法播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！