我试图让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&byline=0&portrait=0&color=d01e2f&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);
});
答案 0 :(得分:1)
您是否尝试过他们的Froogaloop api库? https://developer.vimeo.com/player/js-api
您可以为已完成添加事件 player.addEvent(&#39;完成&#39;,onFinish);
然后触发一个事件,删除包含视频的元素。
对于第二部分,我会关注这篇文章 How do I detect a click outside an element?
该链接中有多种方法可用于检测何时在视频外部点击。然后你只需要从DOM中删除视频对象
干杯,祝你好运