javascript - AngularJs未加载外部资源(External resource not being loaded by AngularJs)

Question

Using Angular and Phonegap, I'm trying to load a video that is on a remote server but came across an issue.

(使用Angular和Phonegap，我正在尝试加载远程服务器上的视频，但遇到了一个问题。)

In my JSON, the URL is entered as a plain HTTP URL.

(在我的JSON中，URL作为纯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 ，但它没有解决我的问题。)

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

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

(我看过这篇关于跨域问题的帖子，但我不知道如何解决这个问题或者我应该采用什么方向。有什么想法吗？)

Any help is appreciated

(任何帮助表示赞赏)

  ask by mhartington translate from so

Answer 1

Another simple solution is to create a filter:

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

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

Then specify the filter in ng-src :

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

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