Angularjs 资源在更改页面时不断加载

Question

好的，所以我有一个漂亮的 "Hardcore" 应用程序内容和资源明智的人可以上传多个视频、图像文档等。

现在查看 chrome 中的网络选项卡，我看到了一些令人不安的东西：

第 1 页有视频，用户转到第 1 页并点击播放视频

然后用户决定他想改变页面，因此他转到第 2 页。

当用户在第 2 页时，上一页的视频仍在获取块，这意味着它仍在加载。因此，如果您继续这种模式足够长的时间，视频就会开始停顿。

我猜我不是第一个遇到这个问题的人，希望你们中的一些人有办法解决它。

这是我加载视频的方式：

<video id="player1" src="http://mydomain/folder/video.mp4" controls="controls" width="598" height="320">
</video>

Answer 1

您可以编写一个指令在您的视频元素上执行此操作；

angular.module('myApp').directive('stopLoadOnChange', ['$rootScope', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            $rootScope.$on('$viewContentLoaded', function() {
                element.get(0).suspend();

            });
        }
    }
}]);

并像这样使用它：

<video stop-load-on-change id="player1" src="http://mydomain/folder/video.mp4" controls="controls" width="598" height="320">
</video>

Answer 2

我遇到了同样的问题并尝试了 yeouuu 的指令，但我用 element[0] 替换了 element.get(0)。还将视频的 src 属性设置为 ''，然后强制加载它对我有用，并停止了 video-previously-set-in-the-src-attribute 完成加载。所以这是我对 yeouuu 指令的修改版本：

    angular.module('app').directive('stopLoadOnChange', ['$rootScope',
      function($rootScope) {
        return {
          restrict: 'A',
          link: function(scope, element, attrs) {
            $rootScope.$on('$viewContentLoaded', function() {

              //this stops the video from loading
              element[0].setAttribute('src', '');

              try {
                if (element[0].tagName.toLowerCase() === 'video') {
                  //for good measure
                  element[0].load();
                }
              } catch (err) {

              }
              //ah why not?
              element[0].remove();
            });
          }
        };
      }
    ]);

我将指令附加到 <video> 和 <source> 标签。

Angularjs 资源在更改页面时不断加载

Angularjs resources keeps loading when changing page

javascript

video

video-streaming

angularjs