8

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.

Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
Luis Delgado
  • 3,644
  • 4
  • 34
  • 54
  • Is there a reason you are using `ng-attr` here: `ng-attr-preload="metadata"` ? In this case the value of the attribute is not going to change so you should just be able to use a regular attribute: `preload="metadata"`. I wonder if setting the value dynamically w/`ng-attr` is part of the problem (i.e.: by the time it's set, it's too late). – Sunil D. May 01 '15 at 16:57
  • No specific reason, but it does not change the behaviour. This code loads several html5 video elements into the web page, and the angularjs app is downloads ALL the video source files as one. So my browsing to the page, even if you don't play any video, your browser will unnecessarily download about 5GB of data. – Luis Delgado May 01 '15 at 20:12
  • @michael: I would really like to understand why you consider this question to be a duplicated. Would appreciate a clarification on that, as I edited the question (edit that you deleted) and I firmly believe these questions address completely different problems. Thanks. – Luis Delgado May 01 '15 at 20:13
  • @luis Your edit was invalid and didn't add anything to your question; It should have been left as a comment. That being said, I don't think this question is a duplicate and voted to reopen it. Your question has 3 reopen votes, so it only needs 2 more to be reopened. – Michael Irigoyen May 01 '15 at 20:16
  • When you inspect the DOM on the rendered page what does the source look like, can you paste it in here? – Fred Aug 27 '15 at 01:53

1 Answers1

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?

Community
  • 1
  • 1
vbuhlev
  • 509
  • 2
  • 10