单页应用程序（角度）页面上的许多视频标签使页面冻结

Question

如果我创建一个单页面应用程序（角度），我尝试在一个页面上切换包含多个视频的页面（例如4），在几次切换之后我遇到了无休止的待处理请求的问题。

根据此问题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 =“metadata”（或preload =“auto”）并使用preload =“none”。
   但是在这种情况下我们没有视频的预览图像，当尝试播放时，我没有缓冲数据，所以我等了好几秒钟并且在播放前有延迟。

2. 我尝试使用针对Chrome描述的所有技巧（链接2），但它适用于Windows平台上的Chrome和Firefox，但在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()
      })
    }
  }
})