动态获取vimeo视频的缩略图和标题 [英] Dynamically get thumbnails and titles of vimeo videos

问题描述

从以下问题中提出来:从Vimeo获取img缩略图吗?

Picking up from this question: Get img thumbnails from Vimeo?

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

I'm trying to create a page with several vimeo videos on it.

我希望HTML中的视频如下所示:

I want to have the videos in the HTML look like this:

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

然后我想让jQuery用img填充divs，其中src是vimeo的缩略图，而a指向视频，其文本是标题的标题.视频.也就是说，它应该像这样结束:

And then I want the jQuery to populate the divs with an img where the src is the thumbnail from vimeo, and an a which points to the video, and whose text is the title of the video. That is, it should end up like this:

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

(为清楚起见添加了缩进)

(Indentation added for clarity)

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

This is my starting point from that other question:

<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已经存在.

Assuming the div with id already exists.

  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不存在:-

If the div with id doesnot exist:-

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

这篇关于动态获取vimeo视频的缩略图和标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！