Angularjs resources keeps loading when changing page

Question

Okay so i have a pretty "Hardcore" application content and resource wise where people are able to upload multiple videos, images documents ect.

Now looking at my network tab in chrome i saw something disturbing:

Page 1 has a video the user goes to page 1 and clicks play on the video

The user then decides that he wants to change page and therefor he goes to page 2.

While the user is on page 2 the video from the previous page is still getting chunks meaning that it is still loading. So if you continue this pattern for long enough the videos will start stalling.

I am guessing that i am not the first to come across this issue and hope that some of you have a way to solve it.

This is how i load my videos:

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

Answer 1

You could write a directive that does this on your video elements;

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

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

            });
        }
    }
}]);

and use it like this:

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

Answer 2

I had the same issue and tried yeouuu's directive but I replaced element.get(0) with element[0] . Also setting the video's src attribute to '' and then forcing it to load worked for me and stopped the video-previously-set-in-the-src-attribute from finishing to load. So here's my modified version of yeouuu's directive:

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

I attached the directive to both <video> and <source> tags.