如何使用 Angularjs 从 url 显示 youtube 缩略图 [英] how to display youtube thumbnail image from url with Angularjs
问题描述
我刚开始使用 angularjs,我想从 youtube 视频 url 显示 youtube 缩略图......当人们在输入中插入 url 然后单击按钮时,有没有办法显示视频缩略图,
I just start to using angularjs and I want to display youtube thumbnail image from the youtube video url ... is there a way to display video thumbnail when people insert url in input and then click the button,
PLUNKER
http://plnkr.co/edit/9SBbTaDONuNXvOQ7lkWe?p=preview
推荐答案
Youtube 提供其视频的默认缩略图.
Youtube provide default thumbnail image of its video.
您可以使用以下示例 URL 来创建缩略图.
You can use below sample URL to create thumbnail image.
http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg
您需要从给定的 url 中搜索 id 的位置 &像上面一样创建 url 会给你缩略图.
Where you need to search id from the given url & create url like above will give you thumbnail image.
控制器
app.controller('MyCtrl', ['$scope',
function($scope) {
$scope.inputs = [];
$scope.addInput = function() {
$scope.inputs.push({
field: ''
});
}
$scope.removeInput = function(index) {
$scope.inputs.splice(index, 1);
}
$scope.set2 = function($ayd) {
var thumb = getParameterByName(this.input.ayd, 'v'),
url = 'http://img.youtube.com/vi/' + thumb + '/default.jpg';
this.thumb = url
}
function getParameterByName(url, name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(url);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
}
]);
有很多方法可以做到这一点,您可以参考从这里
There many ways to do this, you can refer from here
工作 Plunkr 在这里
这篇关于如何使用 Angularjs 从 url 显示 youtube 缩略图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!