AngularJS downloads full video file for HTML5 video element

Question

I am building an application using AngularJS whose homepage displays the user 5 videos. The user can then click on any one of them to start playback.

The browser is currently downloading ALL source video files for each html5 video element displayed in the page. This is happening on Chrome and FireFox, but not on IE 11.

Here is the code for the app

AngularJS app initialization

var app = angular.module("hdv", ['ngCookies', 'infinite-scroll']).config(function ($interpolateProvider, $sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://*.vo.msecnd.net/**',
    'https://*.domain.com/**'
]);
$interpolateProvider.startSymbol('[[[').endSymbol(']]]');
});

I use the $sceDelegateProvider to whitelist different origins, as the video source files are served via CDN's (whose domain names are obviously different than the uri of my page).

The html5 video elements are built using a customer directive:

app.directive("aVideo", function($http){
return {
    template: '<video controls width="100%" ng-attr-poster=[[[post.creative.media.poster]]] ng-attr-preload="metadata" ng-src="[[[post.creative.media.uri]]]" ng-attr-type="[[[post.creative.media.contentType]]]"></video>',        
    scope:{
        post: "=",
    },
    link: function(scope, element, attrs) {
        $(element).find("video").on("play", function () {
            $http.post('/post/' + scope.post.creative.cuid + '/views?_csrf=' + csrfToken)
            .success(function(data){

            })
            .error(function(error){             

            }); 
        });
    },
}
});

Note that the video elements all have the preload=metadata attribute set, so downloading of the source file should not start.

As you can see above, the source file is taken from the scope object "[[[post.creative.media.uri]]]". Through debugging, I have come to realize that it is the resourceUrlWhitelist method the one that triggers the download. If I remove the whitelisting, then the video files are not downloaded anymore (but are also not displayed in the browser due to $sce insecure error). Also, if I set this uri using the $sce "resourceUrl" method on every "post" object, then the browser will download the entire file.

It seems that, whenever $sce is used to whitelist a domain or the origin of a file, the browser just downloads the entire file, without respective the fact that it is a source of a video element and thus the preload attribute should be honored.

I'd like to get input from the community on how to resolve this issue, as every time users download my homepage, their browsers are downloading about 500mb of video data that they do not need.

Answer 1

1. You should definitely use preload instead of ng-attr-preload.

2. Check whether the meta block is at the end of your file. If this is your case check this post on how to fix it: Why do webkit browsers need to download the entire html5 video (mp4) before playing?