播放和停止放置在Bootstrap模式中的Vimeo视频 [英] Play and stop Vimeo video placed in Bootstrap modal

问题描述

我在Bootstrap视频中有一个Vimeo iframe视频.我需要在触发模态时开始播放，而在模态关闭时停止播放.目前，我可以通过使用不带src属性的iframe并在触发模态时将其填充为jQuery来开始使用模态开放.这是代码片段；

I have a Vimeo iframe video in Bootstrap video. I need to have it start playing when I trigger modal and stop playing when a modal is closed. Currently I can have in start playing on modal open by having iframe with no src attribute and having it filled with jQuery on triggering modal. This is the code snippet;

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

这很好用，我可以在模式打开时开始播放，但是当我关闭模式时，音乐会继续在后台播放.

This works fine and I get it to start when modal opens but when I close modal the music keeps playing in the background.

当仅用于关闭模式而不将其设置为自动播放时，另一种方法可以正常工作.因此，自动播放设置为0，我有此代码段；

The other method works fine when but only for closing the modal without having it set to autoplay. So the autoplay is set to 0 and I have this snippet;

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

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

This stops the video when I close modal. I need to have this combined somehow. I need to have it autoplay when modal opens and to stop playing when modal closes.

有任何线索吗?

谢谢.

推荐答案

要添加到eroedig的答案中，请查看Vimeo的文档

To add to eroedig's answer, check out Vimeo's documentation Calling the API with Froogaloop.

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>

1. 注意-我给它指定了一个名为'nofocusvideo'的ID，该ID将在此处显示:

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

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

这篇关于播放和停止放置在Bootstrap模式中的Vimeo视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！