Сделать видео Vimeo Исчезнуть, когда он закончится, и Остановить на клике

Question

Я пытаюсь получить Vimeo iframe, чтобы 1) исчезнуть, когда видео закончится, и 2) исчезнуть и остановиться, когда пользователь нажимает за пределы рамки.

Я видел несколько вопросов по первому вопросу, но API Vimeo слишком сложный для моего набора навыков без каких-либо конкретных указаний. Второй вопрос, о котором я не думаю, был специально задан.

Вот 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

Приветствия и удач