在自定义弹出窗口中暂停 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;
  });
});