我的目标是用特定 channel 的youtube视频填充页面。在Angular 1.5中,这不像在YouTube链接的末尾添加youtube视频ID那样简单。我查了几个样本,但仍然无法使用。有人能帮我吗?谢谢!
控制者
(function() {
'use strict';
angular.module('theWell')
.controller('MediaController', MediaController)
.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.youtube.com/**'
]);
});
MediaController.$inject = ['$http']
function MediaController ($http) {
var vm = this;
vm.videos = {}
vm.links = []
$http({
method: 'GET',
url: 'http://localhost:3000/api/mediaRequest'
}).then(function (youtubeData) {
vm.videos = youtubeData.data
var items = vm.videos.items
for(var i = 0; i < items.length; i++) {
vm.links.push(items[i].id.videoId)
}
}, function (response) {
console.log(response)
});
vm.getIframeSrc = function(links) {
return 'https://www.youtube.com/embed/' + links;
};
console.log(vm.links)
}
}());
的HTML
<div>
<h1 class="center">Media</h1>
</div>
<div ng-repeat="link in MediaVm.links">
<iframe width="100%" ng-src="{{getIframeSrc(link)}}" frameborder="0 " allowfullscreen></iframe>
</div>
最佳答案
我想到了!
控制者
(function() {
'use strict';
angular.module('theWell')
.controller('MediaController', MediaController)
MediaController.$inject = ['$http']
function MediaController ($http) {
var vm = this;
vm.videos = {}
vm.links = []
$http({
method: 'GET',
url: 'http://localhost:3000/api/mediaRequest'
}).then(function (youtubeData) {
vm.videos = youtubeData.data
var items = vm.videos.items
for(var i = 0; i < items.length; i++) {
vm.links.push(items[i].id.videoId)
}
}, function (response) {
console.log(response)
});
vm.getIframeSrc = function(src) {
return 'https://www.youtube.com/embed/' + src;
};
console.log(vm.links)
}
}());
App.js
(function() {
'use strict';
angular.module('theWell', ['ui.router'])
.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.youtube.com/**'
]);
});
}());
的HTML
<div>
<h1 class="center">Media</h1>
</div>
<div ng-repeat="link in MediaVm.links">
<div class="vidFrame">
<iframe width="100%" height="500px" ng-src=" {{MediaVm.getIframeSrc(link)}}" frameborder="0" allowfullscreen></iframe>
</div>
</div>
关于angularjs - 我正在尝试使用API和Angular 1.5用youtube视频填充页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42775244/