外部资源未由 AngularJs 加载

javascript angularjs cordova

2022-08-30 01:25:51

使用Angular和Phonegap，我正在尝试加载远程服务器上的视频，但遇到了问题。在我的 JSON 中，URL 作为纯 HTTP URL 输入。

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

我的视频模板

 <video controls poster="img/poster.png">
       <source ng-src="{{object.src}}" type="video/mp4"/>
 </video>

我的所有其他数据都被加载，但是当我查看控制台时，我收到以下错误：

Error: [$interpolate:interr] Can't interpolate: {{object.src}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL

我尝试添加我的配置设置，但它没有解决我的问题。$compileProvider

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

我看到了这篇关于跨域问题的文章，但我不知道如何解决这个问题，或者我应该朝哪个方向发展。有什么想法吗？任何帮助是值得赞赏的

答案 1

另一个简单的解决方案是创建一个过滤器：

app.filter('trusted', ['$sce', function ($sce) {
    return function(url) {
        return $sce.trustAsResourceUrl(url);
    };
}]);

然后在中指定过滤器：ng-src

<video controls poster="img/poster.png">
       <source ng-src="{{object.src | trusted}}" type="video/mp4"/>
</video>

答案 2

这是唯一对我有用的解决方案：

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"};
});

然后在 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