让 Vimeo 视频在结束时消失，并在点击时停止

Question

我试图让 Vimeo iframe 1）在视频结束时消失，2）当用户在框架外点击时消失并停止。

我看到了一些关于第一个问题的问题，但如果没有一些具体的指导，Vimeo API 对我的技能来说太复杂了。第二个问题我认为没有被特别提出。

这是一个fiddle，其中包含我预先存在的 jquery 和 html 内容。

/*HTML*/

    <div class="main_image">
    <div id="video"></div>

 <a href="#" id="showVideo">
    <img src="http://static.ddmcdn.com/gif/11-billion-people.jpg">
        <div class="playbutton">
                <img class="image" src="http://www.onyxga.com/images/Play-Button.png">
                <img class="image hover" src="http://www.clipartbest.com/cliparts/M9c/pjy/M9cpjydTE.png">
        </div>
        <div id="title">Video Title</div>
 </a>

</div>


/*script*/

$('#showVideo').click(function() {
    $('#video').show().html('<iframe src="http://player.vimeo.com/video/122447979?title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="600" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
});

   $(".main_image").mouseenter(function()
   {
       $(".playbutton").fadeIn(100);                    
   });

   $(".main_image").mouseleave(function()
   {
       $(".playbutton").fadeOut(100);                    
   });

Answer 1

你试过他们的 Froogaloop api 库吗？ https://developer.vimeo.com/player/js-api

您可以在完成后添加事件 player.addEvent('finish', onFinish);

然后让它触发一个删除包含视频的元素的事件。

对于第二部分，我会关注这篇文章 How do I detect a click outside an element?

该链接中有多种方法可以用来检测他们何时点击了视频之外的内容。然后你只需要从 DOM 中删除视频对象

祝你好运