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

问题描述

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.

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.

Any clues?

Thanks.

解决方案

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

1. Add ?api=1&player_id=vimeoplayer in your universal embed code like:

<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. Note - i gave it an id named 'nofocusvideo' that will be seen here:

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

3. Declare 2 variable above eroedig's JS like:

<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屋！