我正在尝试从Youtube获取缩略图,并将相应的图像插入html。
我的HTML:
<div id="first">
<ul class="thumbnails">
<li><a href="http://www.youtube.com/watch?v=-dzpkn29_vY"></a></li>
<li><a href="http://www.youtube.com/watch?v=xFCRMonf7lI"></a></li>
</ul>
</div>
<div id="second">
<ul class="thumbnails">
<li><a href="http://www.youtube.com/watch?v=Ps-9L0-NO"></a></li>
<li><a href="http://www.youtube.com/watch?v=hJZCHZ2wV7U"></a></li>
</ul>
</div>
所以我希望HTML看起来像这样:
<ul class="thumbnails">
<li>
<a href="http://www.youtube.com/watch?v=UBTUAHGpQqE">
<img src="http://img.youtube.com/vi/-dzpkn29_vY/2.jpg" alt="#" />
</a>
</li>
<li>
<a href="http://www.youtube.com/watch?v=mTkPfjSXFpo">
<img src="http://img.youtube.com/vi/xFCRMonf7lI/2.jpg" alt="#" />
</a>
</li>
无论如何,我可以使用在SO上找到的此功能:
function getScreen( url, size ) {
if(url === null){ return ""; }
size = (size === null) ? "big" : size;
var vid;
var results;
results = url.match("[\\?&]v=([^&#]*)");
vid = ( results === null ) ? url : results[1];
if(size == "small"){
return "http://img.youtube.com/vi/"+vid+"/2.jpg";
} else {
return "http://img.youtube.com/vi/"+vid+"/0.jpg";
}
}
编辑:问题是基于每个href动态添加img
最佳答案
这是一个演示,可为您提供所需的结果。
演示:jsFiddleEach
将遍历选择集中的所有链接。要设置该值,您需要使用html
函数。从带有包装的函数返回字符串会将图像设置到页面上。
关于jquery - 使用jQuery从HTML生成YouTube缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8914489/