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?

Blazemonger · Accepted Answer · 2014-06-27 15:54:16Z

8

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/

edited Jun 27, 2014 at 15:54

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

answered Feb 19, 2014 at 15:27

spikeheap

3,8871 gold badge34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mcranston18 Over a year ago

Thanks for the response. The fiddle you posted is the same as my original one though?

spikeheap Over a year ago

Sorry, clearly I forgot to bother saving it! I've updated the link in the answer...

Collectives™ on Stack Overflow

Angular JS Handling Ng-Repeated HTML5 Video & $SCE

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related