在源标签ng-source不适用于动态视频？

我想显示来自角度控制器（从服务器端动态）的缩略图视频，但ng-source无法采取url路径，但它会工作正常，当我给直接url路径。在源标签ng-source不适用于动态视频？

这是我的控制器代码。

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

源标签不工作

来源

2016-09-19 Onkaresh Ghali

只有源标签不工作？其他一切都好吗？ – user2085143

你可以请提供一个plunkr，以便人们修复它吗？ –

是的，只有源标签不起作用。 –

AngularJS从它认为什么是不可信的来源挡住你的资源。

根据角，

默认情况下，只有属于同一产地的网址是值得信赖的。这些是具有与应用程序文档相同的域，协议和端口的URL。

克服此问题相对简单，您需要通过使用$sce来告诉您的Angular应用程序源确实是可信的源。

让我们创建一个过滤器，将做到这一点：

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

内，您的HTML，你可以简单地使用

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

来源

2016-09-19 12:32:52 Dan

在源标签ng-source不适用于动态视频？

回答

相关问题