javascript - 点击播放vimeo

Question

尝试实现此功能，单击即可播放 vimeo 视频。

我找到了一个这样的例子，并认为这是可能的。我在这个方形页面上看到了它:https://squareup.com/#video-testimonials

有人知道他们是怎么做到的吗？他们用视频替换了图像并播放？

Answer 1

我刚刚编写了一些查询来完成这项工作。给定的标记如下所示:

<img id="vimeo-83741013" class="vimeo" alt=""/>

这个 jQuery 将抓取缩略图并使其点击播放:

//Finds Thumbnails for Vimeo Videos
$('html').find('img.vimeo').each(function(index,item){
  var vimeo_id = this.id.split('-')[1];

  $.ajax({
    type:'GET',
    url: 'http://vimeo.com/api/v2/video/' + vimeo_id + '.json',
    jsonp: 'callback',
    dataType: 'jsonp',
    success: function(data){
      var thumb_src = data[0].thumbnail_large;
      $(item).attr('src', thumb_src);
    } 
  });
});

//Replace Vimeo Thumbnail with Vimeo Video
$('html').on('click', 'img.vimeo', function(){
    var vimeo_id = this.id.split('-')[1];
    var vimeoHeight, vimeoWidth;
    vimeoHeight = $(this).outerHeight();
    vimeoWidth = $(this).outerWidth();

    var $iframe = $('<iframe />', {
      src : '//player.vimeo.com/video/'+vimeo_id+'/?autoplay=1',
      class : 'vimeo',
      frameborder : 0
    })

    $iframe.attr('width',vimeoWidth).attr('height', vimeoHeight);

    $(this).parent().removeClass('video');
    $(this).replaceWith($iframe);
});

您可以在此处查看实际示例: http://codepen.io/roundedbygravity/pen/pGAhC