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

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的文档,使用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>

Answer 2

我尝试使用froogaloop2,但它总是返回此错误:无法读取未定义的属性'ready'

相反,你可以简单地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

请参阅Vimeo 的嵌入文档。

您可以设置一个名为 的属性autoplay。他们指出，它可能不适用于某些设备，但将此属性设置为1（或可能true）应该会有所帮助。

代码可能看起来像这样：

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