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

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

我已经看到关于第一个问题的几个问题，但是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);      
    });

来源

2015-04-15 user2985093

这不适用于vimeo api。你可以尝试为你的问题的第一部分使用setTimeout，但这是一个坏主意。第二部分： 1）您可以添加覆盖和更新网址（我相信Vimeo具有自动播放网址参数），当它被点击并将其重点时 2）当失去焦点时，再次更改iframe src。但最好的方法是使用他们的API！ – colecmc

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

你可以添加事件在完成 player.addEvent（'finish'，onFinish）;

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

对于第二个部分我会按照这个帖子 How do I detect a click outside an element?

有各种各样的那个链接应该当他们点击视频以外的检测工作方法。然后你只需要删除DOM中的视频对象

欢呼声和好运

来源

2015-04-15 17:59:49 humanbeing

试图让视频完成后关闭。看看这里的API和一些相关的讨论，但我做错了什么... https://jsfiddle.net/cdo2roqe/1/ – user2985093

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

回答

相关问题