动态获取 Vimeo 视频的缩略图和标题

Question

接着这个问题：如何从Vimeo获取缩略图?

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

我希望HTML中的视频看起来像这样：

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

然后我希望jQuery使用来自vimeo的缩略图填充divs中的，并且要包括一个指向视频的，其文本为视频的标题。即最终结果应该如下所示：

<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>

- Dan

---

你是否已经有了带id的div并且要将包含图像的构建锚点附加到它上面？`div id='12345678' class='vimeo'>``它是否已经存在于DOM中？ - PSL

是的，我会手动输入所有具有所需视频的id的div。我想让js填写详细信息。 - Dan

好的，请尝试我的答案中的第一个，虽然我没有测试过，但应该可以正常工作。 - PSL

Answer 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

- PSL

---

div元素的id已经存在。但是我如何将div中的id传递到.ajax调用的url:部分中的video_id中？这样做会将注入应用于页面上具有该类的所有div吗？ - Dan

你打算如何获取每个 class 为 vimeo 的 div，并进行 Ajax 调用并填充它？ - PSL

太棒了！你真的很厉害！this. 就是我一直在寻找的，非常感谢！ - Dan

有没有办法在缩略图加载时使它们淡入呢？ - Dan

Answer 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));
}

- unloco