AngularJS kann nicht variabel zu html5 Video src zuordnen

Question

ich einen Fehler von Error while interpolating: videos/{{video.name}} mit folgendem Code bekam:

<div ng-repeat='video in videos'> 
     <div class="col-md-3"> 
     <video controls> 
      <source src="videos/{{video.name}}" type="video/mp4"> 
      Your browser does not support HTML5 video. 
     </video> 
     {{video.name}} // this worked 
     </div> 
    </div> 

Versuchte ng-src auch, aber nicht funktioniert. Seltsam.

Answer 1

Verwenden Sie diesen Filter,

app.filter("trustUrl", ['$sce', function ($sce) { 
     return function (recordingUrl) { 
      return $sce.trustAsResourceUrl(recordingUrl); 
     }; 
    }]); 

HTML

<video controls> 
     <source src="videos/{{video.name | trustUrl}}" type="video/mp4"> 
     Your browser does not support HTML5 video. 
    </video> 

Answer 2

Try this:

Html:

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <div ng-repeat='video in videos'> 
     <div class="col-md-3"> 
     <video controls> 
      <source src="videos/{{video.name}}" type="video/mp4"> 
      Your browser does not support HTML5 video. 
     </video> 
     {{video.name}} // this worked 
     </div> 
    </div> 
</div> 

JS:

var myApp = angular.module('myApp',[]); 

myApp.controller('MyCtrl',function($scope) { 
    $scope.videos = [ 
     {"name":"alpha"}, 
     {"name":"beta"}, 
     {"name":"gama"} 
    ] 
}); 

Working demo!