更改页面时,Angularjs资源会继续加载

时间:2015-11-20 11:46:15

标签: javascript angularjs video video-streaming

好的,所以我有一个漂亮的“硬核”应用程序内容和资源明智,人们可以上传多个视频,图像文件等。

现在查看我在chrome中的网络选项卡,我发现了令人不安的事情:

第1页有一个视频,用户转到第1页并点击视频播放

然后用户决定他想要更改页面,因此他转到第2页。

当用户在第2页时,来自上一页的视频仍然会得到块,这意味着它仍在加载。因此,如果您继续使用此模式足够长的时间,视频将开始停止。

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

这是我加载视频的方式:

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

2 个答案:

答案 0 :(得分:2)

您可以编写一个指令来对您的视频元素执行此操作;

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>

答案 1 :(得分:0)

我遇到了同样的问题并尝试了yeouuu的指令,但我将element.get(0)替换为element[0]。同时将视频的src属性设置为'',然后强制加载它,并停止视频先前设置的src属性从完成加载。所以这是我对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>标记。