播放和停止放置在 Bootstrap 模式中的 Vimeo 视频

我在 Bootstrap 视频中有一个 Vimeo iframe 视频。我需要让它在触发模态时开始播放，并在模态关闭时停止播放。目前，我可以通过没有 src 属性的 iframe 并在触发模式时用 jQuery 填充它来开始在模式打开上播放。这是代码片段；

    jQuery("#videogumb").click(function() {
    jQuery('#myModal .modal-body iframe').attr('src','the-source-code');
    });

这工作正常，我在模式打开时启动它，但当我关闭模式时，音乐继续在后台播放。

另一种方法可以正常工作，但仅适用于关闭模式而不将其设置为自动播放。所以自动播放设置为 0，我有这个片段；

    jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {
    jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src"));
    });

当我关闭模式时，这会停止视频。 我需要以某种方式将其结合起来。我需要让它在模式打开时自动播放，并在模式关闭时停止播放。

有什么线索吗？

Thanks.

要添加 eroedig 的答案，请查看 Vimeo 的文档使用 Froogaloop 调用 API.

1. 在通用嵌入代码中添加 ?api=1&player_id=vimeoplayer，如下所示：

<iframe src="//player.vimeo.com/video/116160160?api=1&player_id=vimeoplayer&title=0&amp;byline=0&amp;portrait=0" name="vimeoplayer" id="nofocusvideo" width="615" height="346" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

2. 注意 - 我给了它一个名为“nofocusvideo”的 id，可以在此处看到：

var iframe = document.getElementById('nofocusvideo');

3. 在 eroedig 的 JS 上面声明 2 个变量，如下所示：

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
var iframe = document.getElementById('nofocusvideo');
// $f == Froogaloop
var player = $f(iframe);

$('.modal').on('hidden.bs.modal', function () {
player.api('pause');
})

$('.modal').on('shown.bs.modal', function () {
player.api('play');
})
</script>