Question

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

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

这很好用，我在模态打开时启动，但是当我关闭模态时，音乐会在后台继续播放。

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

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

当我关闭模态时，这会停止视频。我需要以某种方式结合这个。当模态打开时我需要自动播放并在模态关闭时停止播放。

任何线索？

感谢。

Answer 1

要添加到eroedig的答案，请查看Vimeo的文档Calling the API with Froogaloop。

在您的通用嵌入代码中添加？api = 1＆amp; 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>

注意 - 我给它一个名为'nofocusvideo'的ID，将在这里看到：

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

在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>

Answer 2

我尝试使用froogaloop2，但它总是返回此错误：无法阅读属性＆＃39;准备好＆＃39;未定义的

相反，您只需使用postMessage即可在play内的视频上致电pause和iframe。

$(document).ready(function() {  
  var $iframe = $('#nofocusvideo'),
      contentWindow = $iframe[0].contentWindow,
      targetOriginUrl = $iframe.attr('src').split('?')[0];
  $('.modal').on('hidden.bs.modal', function () {
    contentWindow.postMessage({ 'method': 'pause' }, targetOriginUrl);
  });
  $('.modal').on('shown.bs.modal', function () {
    contentWindow.postMessage({ 'method': 'play' }, targetOriginUrl);
  });
});

Answer 3

所以我在这里尝试了所有的建议，没有什么比Vimeo更新的文档更好。https://github.com/vimeo/player.js#pause-promisevoid-error

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

$('.modal').on('hidden.bs.modal', function () {
	player.pause();
})

$('.modal').on('shown.bs.modal', function () {
	player.play();
})

</script>

Answer 4

我通过调用Bootstrap Modal API和Vimeo API完成了这个，代码如下。您还需要包含Vimeo的Froogaloop脚本，也在下面。

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

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

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

Answer 5

请参阅Vimeo's embedding documentation。

您可以设置名为autoplay的属性。他们注意到它可能无法在某些设备上运行，但将此属性设置为1（或者true）可能有所帮助。

代码可能如下所示：

jQuery('#myModal .modal-body iframe').attr({
    src: 'the-source-code',
    autoplay: 1
});

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

5 个答案: