在自定义弹出窗口中关闭时暂停Vimeo视频

Question

我有一个vimeo视频打开在一个灯箱。关闭灯箱时，如果没有暂停，视频将继续播放。我需要让视频暂停，一旦点击了灯箱。

这是我能想到的.但是在编写JavaScript时遇到了麻烦。提前谢谢。

<a class="btn trigger" href="javascript:;">
   <img src="#">
</a>


<div id="videoFrame1" class="modal-wrapper">
    <div class="modal">
        <div class="head">
            <a class="btn-close trigger" href="javascript:;"></a>
        </div>
        <div class="content">
            <div class="js-video [vimeo, widescreen]">
                 <iframe id="firstvideo" src="https://player.vimeo.com/video/291592533" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

$( document ).ready(function() {
  $('.trigger').click(function() {
     $('.modal-wrapper').toggleClass('open');
     return false;
  });
});

Answer 1

解决此问题的一种方法是集成Vimeo player.js script。这有一个暂停播放器的方法：

​

var video = document.getElementById('firstvideo');
var player = new Vimeo.Player(video);

$( document ).ready(function() {
  $('.trigger').click(function() {
     player.pause()
     return false;
  });
});

​