在angularjs中嵌入視頻

在我的角度應用程序中，我有嵌入式視頻列表，我想在我的視圖中顯示此嵌入式視頻。我下面的代碼給出：在angularjs中嵌入視頻

角的ArrayList

.filter('unsafe', function() { 
     return function(url) { 
      var newUrl = url.replace(/&lt;/g, "<").replace(/&gt;/g, ">"); 
      return newUrl ; 
     } 
}) 



controller('', function($scope) { 

    $scope.videoLink = [ 
     '<iframe width="560" height="315" src="https://www.youtube.com/embed/cwXfv25xJUw" frameborder="0" allowfullscreen></iframe>', 
     '<iframe width="560" height="315" src="https://www.youtube.com/embed/cKJvScGB5Ak" frameborder="0" allowfullscreen></iframe>', 
     '<iframe width="560" height="315" src="https://www.youtube.com/embed/W9xtFtOA7_8" frameborder="0" allowfullscreen></iframe>' 
    ]; 

});

HTML視圖

<div ng-repeat="url in videoLink"> 
     <!-- {{url}} --> <!-- only show plain text --> 

     <!-- <div ng-html-bind='url'></div> --> <!-- nothing shown --> 

     <!-- {{url | unsafe}} --> <!-- only show plain text --> 
    </div>

我該如何解決這個問題？？？

來源

2016-04-03 user2013

而不是包含一組HTML元素作爲字符串的videoLink數組，您可以改爲使該列表包含YouTube嵌入網址嗎？它看起來像其餘的iframe元素是完全一樣的。

如果你這樣做，那麼我相信以下將工作：

<div ng-repeat="url in videoLink"> 
    <iframe width="560" height="315" src="{{url | unsafe}}" frameborder="0" allowfullscreen></iframe> 
</div>

來源

2016-04-03 13:29:16 mattherman

你可以使用我的YouTube響應指令：https://github.com/Citrullin/angular-responsive-youtube

我只用$範圍和$ SCE的網址。在你的例子中。您可以創建一個範圍變量，您可以在其中保存所有youtube網址。在您看來，您可以使用ng-repeat和指令內部：

來源

2016-04-03 13:42:52

我用這個解決方案的過濾器請檢查下面的代碼。

的Html

<div class="container" ng-controller = "mycontroll"> 
    <div class="col-md-4" ng-repeat="video in videos track by $index"> 
     <div class="embed-responsive embed-responsive-16by9"> 
     <iframe width="420" height="315" ng-src="{{video|trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </div> 
</div><!-- container end -->

var app = angular.module('myapp', []); 
    app.controller("mycontroll",function($scope){ 
     $scope.videos=[ 
      'https://www.youtube.com/embed/Pdaw-ipnPPc', 
      'https://www.youtube.com/embed/OssRAVZhsRk', 
      'https://www.youtube.com/embed/gf6lhGV6DNs', 
      'https://www.youtube.com/embed/Pdaw-ipnPPc', 
      'https://www.youtube.com/embed/OssRAVZhsRk', 
      'https://www.youtube.com/embed/gf6lhGV6DNs' 
     ]; 
    }); 
    app.filter('trustAsResourceUrl', ['$sce', function($sce) { 
     return function(val) { 
      return $sce.trustAsResourceUrl(val); 
     }; 
    }])

來源

2016-04-03 19:15:15 user1162084

在angularjs中嵌入視頻

回答

相關問題