Многие видео теги на странице в одном приложении страницы (угловые) делают страницу замороженной

Question

Если я создаю одностраничное приложение (угловое), где я пытаюсь переключать страницы с несколькими видео на одной странице (например, 4), после нескольких переключателей I имеют проблемы с бесконечными ожидающими запросов.

По этому вопросу Dynamic img (or video) tags don't load resources at all, HTTP requests are "pending" и опубликовать об этой проблеме в Chrome https://code.google.com/p/chromium/issues/detail?id=234779 есть следующие советы:

1. Не используйте преднагрузки = "метаданных" (или поджать = "авто ") и используйте preload =" none ".
   Но в этом случае у нас нет предварительного изображения для видео, и когда я пытаюсь воспроизвести его, у меня нет буферизованных данных, поэтому я жду несколько секунд и задерживаю перед воспроизведением.

2. Я попытался использовать все трюки, описанные для Chrome (ссылка 2), но он работает в Chrome и Firefox на платформе Windows и не работает в Opera.
   Обычно он не работает во всех браузерах на платформе MacOS. У меня все еще есть бесконечные ожидающие запроса.

О ожидающих запросов: речь идет не только о запросах видео или аудиофайлов, это может быть соединение с базой данных или .html-страницей или так далее. Я думаю, проблема в браузере. Может быть, кто-нибудь знает какие-нибудь трюки?

Answer 1

В основном в соответствии с этим HTML5 video request stay pending (forever) и этим Chrome HTML5 Videos stop working if too many tabs are open - Memory issue? Я нашел решение для одностраничного приложения (в моем случае на основе угловой структуры): необходимо переопределить src attr видеотега и перезагрузить его, а затем - удалить со страницы. Пример:

$('video').each(function() { 
    $(this)[0].pause(); 
    $($(this)[0]).attr('src', ""); 
    $(this)[0].load(); 
    $(this)[0].remove(); 
}); 

или полный код для углового регулятора:

$scope.$on('$destroy', function() { 
    $('video').each(function() { 
     $(this)[0].pause(); 
     $($(this)[0]).attr('src', ""); 
     $(this)[0].load(); 
     $(this)[0].remove(); 
    }); 
}); 

Если это не поможет, попробуйте все трюки здесь Chrome HTML5 Videos stop working if too many tabs are open - Memory issue?

Answer 2

Он появляется только хорошие способы обработки этого являются установить preload="true" на элемент видео или каждый раз избавиться от элемента и его источника. Я думаю, что лучше предусмотреть предварительную загрузку видео, поэтому последнее решение предпочтительнее. Лучший способ реализовать его в Angular - использовать директиву.

<video video-cleanup="" src="my-video.mp4"></video> 

angular.directive('videoCleanup',() => { 
    return { 
    link: function($scope, $element, $attrs) { 
     const element = $element[0] 
     $scope.$on('$destroy',() => { 
     element.pause() 
     $element.empty() // remove source elements 
     $element.attr('src', '') 
     element.load() 
     element.remove() 
     }) 
    } 
    } 
})