动态获取 vimeo 视频的缩略图和标题答案

【问题标题】：Dynamically get thumbnails and titles of vimeo videos动态获取 vimeo 视频的缩略图和标题
【发布时间】：2013-05-09 10:34:58
【问题描述】：

从这个问题中接听：Get img thumbnails from Vimeo?

我正在尝试创建一个包含多个 vimeo 视频的页面。

我想让 HTML 中的视频看起来像这样：

<div id='12345678' class='vimeo'></div>
<div id='23423423' class='vimeo'></div>

然后我希望 jQuery 使用img 填充divs，其中src 是vimeo 的缩略图，a 指向视频，其文本是标题视频。也就是说，它最终应该是这样的：

<div id='12345678' class='vimeo'>
    <a href='https://vimeo.com/12345678'>
        <img src='url-to-thumbnail.jpg' />
        Video Title
    </a>
</div>

（为清楚起见添加了缩进）

这是我从另一个问题出发的出发点：

<script type="text/javascript">
    $.ajax({
        type:'GET',
        url: 'http://vimeo.com/api/v2/video/' + video_id + '.json',
        jsonp: 'callback',
        dataType: 'jsonp',
        success: function(data){
            var thumbnail_src = data[0].thumbnail_large;
            $('#thumb_wrapper').append('<img src="' + thumbnail_src + '"/>');
        }
    });
</script>

<div id="thumb_wrapper"></div>

【问题讨论】：

您是否已经存在具有 id 的 div 并且要在其上附加带有图像的构造锚？ `div id='12345678' class='vimeo'>``这已经存在于 DOM 中了？
是的，我将手动输入所有 div 以及我想要的视频的 id。我希望js填写详细信息。
好的，然后尝试我的答案中的第一个，我还没有测试过，但它应该可以正常工作。

标签： javascript jquery vimeo

【解决方案1】：

试试这个：-

假设 id 的 div 已经存在。

  success: function(data){

              $('<a/>',{
                 href:data[0].url,
                 text:data[0].title }).append(
              $('<img/>' ,{
                 src:data[0].thumbnail_large
              })
              )
              .appendTo('#'+data[0].id)
        }

如果有id的div不存在：-

     success: function(data){

              $('<a/>',{
                 href:data[0].url,
                 text:data[0].title })
              .append(
                 $('<img/>' ,{
                 src:data[0].thumbnail_large
                 })
              ).appendTo($('<div/>',{
                 id:data[0].id,
                 class:'vimeo'

               }))
               .appendTo('.someContainer');
        }

Fiddle

【讨论】：

id 的 div 已经存在。但是如何将 div 中的 id 放入 url: 调用的 url: 部分中的 video_id 中？那会用该类注入页面上的所有 div 吗？
你可以得到它，你打算如何为每个具有类 vimeo 的 div 执行它，你打算进行 ajax 调用并填充它？
邪恶！你摇滚！ this. 正是我要找的，谢谢！
加载时有什么方法可以将缩略图发送到fadeIn？

【解决方案2】：

追加html到对应的div

var vimeo_content="<a>\
                        <img />\
                        <span></span>\
                    </a>";
// on success function
function(){
    var vdata = data[0];
    var thumbnail_src = vdata.thumbnail_large;
    var video_title   = vdata.title;
    var video_url     = vdata.url;

    $vimeo_content    = $(vimeo_content);
    $vimeo_content.find('a').attr('href',url);
    $vimeo_content.find('img').attr('src',thumbnail_src);
    $vimeo_content.find('span').text(title);
    //append to corresponding div
    $vimeo_content.appendTo($('div#'+video_id));
}

【讨论】：