点击播放vimeo

Question

试图实现此功能点击播放vimeo视频。

我找到了一个这样的例子，并认为它可能以某种方式。我看到它在这个广场上：https://squareup.com/#video-testimonials

任何人都知道他们是如何做到这一点的？他们用视频取代了图像，并让它播放？

Answer 1

该网站使用VideoJS与vimcss皮肤。

视频其实是在Vimeo上未托管，但在Amazon S3上，你可以在源看到：

<video id="cafe-video" class="video-js" width="470" height="264" controls="controls" preload="none" poster="https://s3.amazonaws.com/square-production/video/caffelastazione.jpg"> 
    <source src="https://s3.amazonaws.com/square-production/video/caffelastazione.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
    <source src="https://s3.amazonaws.com/square-production/video/caffelastazione.webm" type='video/webm; codecs="vp8, vorbis"' /> 
    <source src="https://s3.amazonaws.com/square-production/video/caffelastazione.ogv" type='video/ogg; codecs="theora, vorbis"' /> 
    <object class="vjs-flash-fallback" width="470" height="264" type="application/x-shockwave-flash" 
     data="https://d1g145x70srn7h.cloudfront.net/static/0bce7753923e25b5c0d564d064d4c02de79088c1/images/flowplayer.swf"> 
     <param name="movie" value="https://d1g145x70srn7h.cloudfront.net/static/0bce7753923e25b5c0d564d064d4c02de79088c1/images/flowplayer.swf" /> 
     <param name="allowfullscreen" value="true" /> 
     <param name="flashvars" value='config={"playlist":["https://s3.amazonaws.com/square-production/video/caffelastazione.jpg", {"url": "https://s3.amazonaws.com/square-production/video/caffelastazione.m4v","autoPlay":false,"autoBuffering":true}]}' /> 
     <img src="https://s3.amazonaws.com/square-production/video/caffelastazione.jpg" width="470" height="264" alt="Testimonial" title="No video playback capabilities." /> 
    </object> 
</video> 

Answer 2

我只是写了一些查询，使这项工作。鉴于标记，看起来像这样：

<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