Question
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 issue](https://stackoverflow.com/questions/20640920/load-image-data-into- angularjs)s but I'm not sure how to resolve this or what direction I should go in. Any ideas? Any help is appreciated
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>