javascript - Internet Explorer 和 Edge 中的视频、内存管理问题，导致页面上的许多视频显示暗/黑和/或无法播放

Question

我们有一个页面包含 77 个左右的视频缩略图。当视频缩略图悬停在上方时，视频开始在缩略图空间内播放。

当许多(8 到 60 个，具体取决于系统/浏览器)悬停在它们上方时，就会出现问题。视频开始播放不正确或不播放。基本上，平坦/冗余区域全部变暗。在 Edge 中，这种情况会在一两秒后自行纠正，但对于我们的客户来说，这是非常不受欢迎的行为。

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

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

这会清理一些内存，但问题仍然存在，尽管在问题变得明显之前可以播放更多视频。

我似乎确实与内存有关，并且暴露了我们认为 Microsoft 浏览器中的内存泄漏问题。每个视频都会增加内存使用量，并且内存永远不会被清除，就像在 Chrome 和 Firefox 中一样。当任务管理器中的内存使用量接近 600mb 到 1gb(取决于系统)之间时，通常会出现此问题。 (Chrome 始终位于约 500-550 MB 左右。 Firefox 的大小约为 700-800 MB。)

我们注意到该行为开始发生的时间存在一些差异，具体取决于视频卡，但问题总是在某个时刻出现。

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

还有一些其他可能相关的问题。在 IE 中，视频会变成全黑，并且它们的尺寸在屏幕上会发生变化，从而改变页面布局。

这是一个相关问题，但它不重复，因为它没有提供有关必须在 80 个左右的视频上提供便利的问题或解决方案一页:How to properly unload/destroy a VIDEO element

我们正在 IE 版本 11.228.17134.0 和 Edge 版本 42.17134.1.0 上进行测试，这两个版本都是目前的最新版本。

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

我将在全天添加更多有关此问题的信息。

Answer 1

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

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

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

奇怪的是，虽然 delete(this) 是一种 hack，并且不应该在任何浏览器中工作，但根据我读过的评论，它似乎在所有浏览器中都工作这个问题，以及我在 IE/Edge 中的发现。

在 IE(不是 Edge)上，这会产生减慢页面滚动速度的副作用。这是由于我们对页面上的 80 个项目应用了 View 内检查，或者与重新下载海报(缩略图)和视频有关，因为它似乎无法立即有效地缓存这些资源。 (重新)可供渲染器使用。

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

更新:屏幕上有两个或多个视频元素可能会导致该问题。我们只显示一个(效果 100%)，但没有尝试确定视频元素的可能最大数量。