顯示角度js中的視頻網址的縮略圖

我正在開發角度js中的網站，我正在上傳vimeo（https://vimeo.com/）或youtube視頻網址。爲此，我必須在列表中顯示縮略圖，以便可以使用角度js顯示視頻網址的預覽。顯示角度js中的視頻網址的縮略圖

謝謝

2016-12-26 Harshvardhan

你可以做到這一點使用NG-重複，

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

 
app.config(function($sceDelegateProvider) { 
 
    $sceDelegateProvider.resourceUrlWhitelist([ 
 
    'self', 
 
    'https://www.youtube.com/**' 
 
    ]); 
 
}); 
 

 
app.controller('videoController', ['$scope', 
 
    function MyCtrl($scope) { 
 

 
    $scope.product = [{ 
 
     name: 'some name', 
 
     description: 'some description', 
 
     media: [{ 
 
     src: 'v5Asedlj2cw' 
 
     }] 
 
    }, 
 
    { 
 
     name: 'some name 2', 
 
     description: 'some description 2', 
 
     media: [{ 
 
     src: 'v5Asedlj2cw' 
 
     }] 
 
    } 
 
    ] 
 
    
 
    ; 
 

 
    $scope.getIframeSrc = function(src) { 
 
     return 'https://www.youtube.com/embed/' + src; 
 
    }; 
 
    } 
 
]);

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <script src="https://code.angularjs.org/1.5.8/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="videoController"> 
 
    <div ng-repeat="media in product"> 
 
    <div class="thumbnail"> 
 
     <div class="video-container"> 
 
     <iframe width="100%" ng-src="{{getIframeSrc(media.src)}}" frameborder="0 " allowfullscreen></iframe> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-12-26 11:06:22 Sajeetharan

感謝ü它爲我工作.. – Harshvardhan

顯示角度js中的視頻網址的縮略圖

回答

相關問題