twitter-bootstrap 播放和停止放置在 Bootstrap 模式中的 Vimeo 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24952984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Play and stop Vimeo video placed in Bootstrap modal
提问by user2549830
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;
我在 Bootstrap 视频中有一个 Vimeo iframe 视频。我需要让它在我触发模态时开始播放，并在模态关闭时停止播放。目前，我可以通过让 iframe 没有 src 属性并在触发模式时填充 jQuery 来开始在模式打开时播放。这是代码片段；
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.
这很好用，当模态打开时我让它开始，但是当我关闭模态时，音乐继续在后台播放。
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;
另一种方法在但仅用于关闭模态而不将其设置为自动播放时工作正常。所以自动播放设置为 0，我有这个片段；
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.
当我关闭模态时，这会停止视频。我需要以某种方式将其结合起来。我需要在模态打开时自动播放并在模态关闭时停止播放。
Any clues?
有什么线索吗？
Thanks.
谢谢。
回答by jondotwang
To add to eroedig's answer, check out Vimeo's documentation Calling the API with Froogaloop.
要添加 eroedig 的答案，请查看 Vimeo 的文档Calling the API with Froogaloop。
- Add ?api=1&player_id=vimeoplayer in your universal embed code like:
- 在您的通用嵌入代码中添加 ?api=1&player_id=vimeoplayer ，例如：
<iframe src="//player.vimeo.com/video/116160160?api=1&player_id=vimeoplayer&title=0&byline=0&portrait=0" name="vimeoplayer" id="nofocusvideo" width="615" height="346" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>- Note - i gave it an id named 'nofocusvideo' that will be seen here:
- 注意 - 我给了它一个名为“nofocusvideo”的 id，将在此处看到：
var iframe = document.getElementById('nofocusvideo');- Declare 2 variable above eroedig's JS like:
- 在 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>回答by Martin Drapeau
I tried using froogaloop2 but it always returned this error: Cannot read property 'ready' of undefined
我尝试使用 froogaloop2 但它总是返回此错误：无法读取未定义的属性“就绪”
Instead you can simply use postMessageto call playand pauseon the video inside the iframe.
相反，您可以简单地使用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);
});
});
回答by Guy Alexander Haines
So I tried all the suggestions here and nothing was working quite as well as the updated documentation from Vimeo .. https://github.com/vimeo/player.js#pause-promisevoid-error
所以我尝试了这里的所有建议，但没有什么比 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>回答by eroedig
I accomplished this by calling both the Bootstrap Modal API and Vimeo API, code below. You will need to include Vimeo's Froogaloop script as well, also below.
我通过调用 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');
})
回答by Terry Robb
Refer to Vimeo's embedding documentation.
请参阅Vimeo 的嵌入文档。
There is an attribute that you can set called autoplay. They note that it might not work on some devices, but setting this attribute to 1(or maybe true) should help.
您可以设置一个名为autoplay. 他们指出它可能不适用于某些设备，但将此属性设置为1（或可能true）应该会有所帮助。
The code might look something like this:
代码可能如下所示：
jQuery('#myModal .modal-body iframe').attr({
src: 'the-source-code',
autoplay: 1
});
