Ресурсы Angularjs сохраняют загрузку при смене страницы

Question

Итак, у меня есть довольно «контент для жестких дисков» и ресурс, где люди могут загружать несколько видеороликов, ect документов изображений.

Теперь, глядя на мой счет сети в хроме я увидел что-то тревожное:

Page 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.get(0) с element[0]. Также установив атрибут src видео на '', а затем заставив его загружать работу для меня и остановил атрибут video-before-in-the-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> тегам.