javascript - Angular JS Handling Ng-Repeated HTML5 Video & $SCE - Stack Overflow

admin管理员组

文章数量:1391737

JSfiddle here: /

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?

JSfiddle here: http://jsfiddle/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?

• javascript
• html
• angularjs
• video

Share Improve this question Follow edited May 23, 2017 at 11:50 CommunityBot 111 silver badge asked Feb 19, 2014 at 15:16 mcranston18mcranston18 4,80033 gold badges3838 silver badges3737 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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/**']);
});

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

本文标签： javascriptAngular JS Handling NgRepeated HTML5 Video amp SCEStack Overflow