Many video tags on page in single page application (angular) makes page frozen

问题

If I create a single page application (angular) where I try to switch pages with several videos on one page (for example 4), after several switches I have a problem with endless pending requests.

According to this question Dynamic img (or video) tags don't load resources at all, HTTP requests are "pending" and post about this problem in Chrome https://code.google.com/p/chromium/issues/detail?id=234779 there are next advices:

1. Don't use preload="metadata" (or preload="auto") and use preload="none".
   But in this case we don't have preview image for video and when try to play it, I don't have buffered data, so I'm waiting for several seconds and have delay before playing.

2. I tried to use all tricks that described for Chrome (link 2), but it works in Chrome and Firefox on Windows platform and does't work in Opera.
   It generally doesn't work in all browsers on MacOS platform. I still have endless pending requests.

About pending requests: it is not only about requests of video or audio files, it can be database connection or .html page or so on. I think the problem is in browser engine. Maybe anybody knows any tricks?

回答1:

Mostly according to this HTML5 video request stay pending (forever) and this Chrome HTML5 Videos stop working if too many tabs are open - Memory issue? I found a solution for single page application (in my case based on angular framework): need to override src attr of video tag and reload it, and then - remove from page. Sample:

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

or for full code for angular controller:

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

If it doesn't help, try all tricks here Chrome HTML5 Videos stop working if too many tabs are open - Memory issue?

回答2:

It appears the only good ways to handle this are to set preload="true" on the video element or to get rid of the element and its source each time. I think it is better to let the video preload, so the latter solution is preferable. The best way to implement it in Angular is to use a directive.

<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()
      })
    }
  }
})

来源：https://stackoverflow.com/questions/31078061/many-video-tags-on-page-in-single-page-application-angular-makes-page-frozen