Angular JS Handling Ng-Repeated HTML5 Video & $SCE

Question

JSfiddle here: http://jsfiddle.net/TegFf/73/

From this answer, I understand Angular 1.2 ships with Strict Contextual Escaping (SCE) enabled. This affects the parser of expressions using ng-src with an HTML5 video. I understand that if I wrap $sce.trustAsResourceUrl(videoURL) around each of my video sources, then Angular will play them as normal. However, I am getting a list of video sources back from an API. It is expensive for me to loop over item in the array, assign each source as a $sce.trustAsResourceUrl, and then loop over that new array in my view.

What is the most efficient way of assigning all my video sources as trusted without having to loop over all of them? Can I assign all video sources to be $sce trusted beforehand?

Answer 1

It looks like what you want is to whitelist the domain these videos will be served from. You can do this using $sceDelegateProvider

All you need to do is add a bit of config as follows:

app.config(function($sceDelegateProvider) {
 $sceDelegateProvider.resourceUrlWhitelist([
   // Allow same origin resource loads.
   'self',
   // Allow loading from our assets domain.  Notice the difference between * and **.
   'http://media.w3.org/**']);
});

I've updated your fiddle with a working demo: http://jsfiddle.net/spikeheap/ACJ77/1/