Проблемы с видео, управлением памятью в 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. Проблема обычно возникает, когда использование памяти в диспетчере задач достигает от 600 МБ до 1 ГБ (в зависимости от системы). (Chrome всегда занимает около 500-550 мегабайт. Firefox занимает около 700-800 мегабайт.)

Мы заметили некоторую разницу в том, когда поведение начинает происходить, что зависит от видеокарт, но в какой-то момент проблема всегда возникает.

Все эти видео показаны в нескольких местах на странице. Поэтому мне было интересно узнать, можно ли разделить видеопамять между элементами.

Есть еще пара вопросов, которые могут быть связаны. В IE видео становятся полностью черными, а их размеры изменяются на экране, что может изменить макет страницы.

Вот связанная проблема, но она не является дубликатом , так как она не дает вопроса или решения о необходимости облегчить 80 или около того видео на одной странице : Как правильно выгрузить / уничтожить элемент ВИДЕО

Мы проводим тестирование на IE версии 11.228.17134.0 и Edge версии 42.17134.1.0, обе на данный момент самые последние.

Изначально требуемая функциональность заключалась в том, что видео останавливалось на кадре, когда пользователь отключил видео, но сейчас кажется, что мы не сможем этого сделать, если нам придется выгрузить видео.

Я буду добавлять дополнительную информацию об этой проблеме в течение дня, когда она станет доступной.

Answer 1

У нашей команды есть скрипт, который определяет, находятся ли элементы DOM в видимой области на странице, например. не прокручивается выше или ниже дна. Когда пользователь выполняет прокрутку, сценарий добавляет / удаляет класс и отправляет пользовательские события для каждого элемента с добавленным поведением. Я смог использовать эту систему для приостановки, удаления и утилизации (сбора мусора) видеоизображений, которые не отображаются, а затем повторно заполняем их, когда они возвращаются в вид, с исходными свойствами, хранящимися в массиве объектов, связанных с каждое видео / миниатюра.

Это удаляет видео. Функция должна вызываться с помощью .call(), например: disposeVideo.call(videoElement);

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

Странно, что, хотя delete(this) является хаком и не должен работать ни в одном браузере, он, похоже, работает во всех браузерах, согласно комментариям, которые я читал об этой проблеме, и моим выводам в IE /Edge.

В IE (не Edge) это имеет побочный эффект замедления прокрутки страницы. Это вызвано нашей проверкой в ​​просмотре, примененной к 80 элементам на странице, или если это связано с повторной загрузкой плакатов (миниатюрных изображений) и видео, потому что, по-видимому, не происходит эффективное кэширование этих ресурсов для немедленного (re) доступно для средства визуализации.

Еще один побочный эффект (также в IE), связанный с вышеописанным, заключается в том, что при прокрутке видео остаются пустыми, пока ресурсы не будут повторно загружены. Мы предпочитаем использовать изображения, расположенные за видео, в пользу использования атрибута poster для удаляемых элементов видео. Таким образом, на экране никогда не будет пустых эскизов видео.