Question

83

External resource not being loaded by AngularJs

rated 0 times [ 88] [ 5] / answers: 1 / hits: 128803 / 11 Years ago, wed, january 22, 2014, 12:00:00

Using Angular and Phonegap, I'm trying to load a video that is on a remote server but came across an issue. In my JSON, the URL is entered as a plain HTTP URL.

src : http://www.somesite.com/myvideo.mp4

My video template

 <video controls poster=img/poster.png>

       <source ng-src={{object.src}} type=video/mp4/>

 </video>

All my other data gets loaded but when I look my console, I get this error:

Error: [$interpolate:interr] Can't interpolate: {{object.src}}

Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL

I tried in adding $compileProvider in my config set up but it did not resolve my issue.

$compileProvider.aHrefSanitizationWhitelist(/^s*(https?|ftp|mailto|file|tel):/);

I saw this post about cross domain issues but I'm not sure how to resolve this or what direction I should go in. Any ideas? Any help is appreciated

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aden

Add To Favorites

Follow

Total Points: 369

Total Questions: 100

Total Answers: 83

Location: Australia

Member since Tue, Oct 19, 2021

3 Years ago

answered 11 Years ago pranavrorys · Accepted Answer

This is the only solution that worked for me:

var app = angular.module('plunker', ['ngSanitize']);



app.controller('MainCtrl', function($scope, $sce) {

  $scope.trustSrc = function(src) {

    return $sce.trustAsResourceUrl(src);

  }



  $scope.movie = {src:http://www.youtube.com/embed/Lx7ycjC8qjE, title:Egghead.io AngularJS Binding};

});

Then in an iframe:

<iframe class=youtube-player type=text/html width=640 height=385

        ng-src={{trustSrc(movie.src)}} allowfullscreen frameborder=0>

</iframe>

http://plnkr.co/edit/tYq22VjwB10WmytQO9Pb?p=preview