[解決済み] AngularJsで外部リソースが読み込まれない

質問

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

見た クロスドメインの問題については、この投稿 が、これを解決する方法と方向性がわかりません。何かアイデアはありますか？どんな助けでも感謝します。

解決方法は？

私の場合、これしか解決策がありませんでした。

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