ソースタグで、ng-sourceは動的ビデオでは機能していませんか？

Question

私は角度コントローラーから来ている（サーバー側から動的に）サムネイルでビデオを表示したいが、ng-sourceはURLパスを取ることができないが、直接URLパスを与えるとうまくいく。

これは私のコントローラコードです。

$scope.items = { 
     "media": [{ 
      "type": "img", 
      "big": "http://lorempixel.com/400/200/food/" 
     }, { 
      "type": "video", 
      "thumb": "https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761", 
     }] 
    }; 


}); 

HTMLコード

<div id="slider" class="container" ng-style="vm.navPosStyle" ng-repeat="image in items.media"> 
        <img ng-src="{{image.big}}" class="galleryItem" 
         click="vm.setImage(image.big)"/> 
        <video class="galleryItem" ng-if="image.type === 'video'" width="320" height="240"> 
         <source ng-src="{{image.thumb}}" type="video/mp4" ng-click="vm.setImage(image.thumb)"> 
        </video> 
       </div> 

問題が

<video class="galleryItem" ng-if="image.type === 'video'" width="320" height="240"> 
         <source ng-src="{{image.thumb}}" type="video/mp4" ng-click="vm.setImage(image.thumb)"> 
        </video> 

タグが

Answer 1

AngularJSを働いていないソースは、それが信頼できないソースで考えるものから、あなたのリソースをブロックしていますさ。角度による

、デフォルトで

は、同じ起源に属している唯一のURLが信頼されています。これらは、アプリケーションドキュメントと同じドメイン、プロトコル、およびポートを持つURLです。

この問題の克服は比較的簡単です。$sceを使用して、ソースが実際に信頼できるアプリケーションであることをAngularアプリケーションに伝える必要があります。

のは、まさにそれを行いますフィルタを作成してみましょう：あなたのHTMLの内部

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

あなたは、単に唯一のソースタグが機能していない

ng-src="{{image.thumb | trustResource}}"