javascript - AngularJs 未加载外部资源

Question

使用 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):/);

我看到了this post about cross domain issue s 但我不确定如何解决这个问题或我应该朝哪个方向发展。有什么想法吗？任何帮助表示赞赏

Answer 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>