Jouer et arrêter de vidéo Vimeo placé dans le Bootstrap modal

J'ai un Vimeo iframe vidéo dans le Bootstrap de la vidéo. J'ai besoin de l'avoir commencer à jouer quand je déclencheur modal et arrêter de jouer quand un modal est fermé. Actuellement je peux en commencer à jouer sur modale ouvrir en ayant iframe avec aucun attribut src et l'avoir rempli avec jQuery sur le déclenchement de modal. C'est l'extrait de code;

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

Cela fonctionne très bien et j'arrive à démarrer lorsque modale s'ouvre mais quand je fermer la modale de la musique continue à jouer en arrière-plan.

L'autre méthode fonctionne très bien quand, mais uniquement pour fermer la modale sans l'avoir mis à exécution automatique. Si l'exécution automatique est mis à 0 et j'ai cet extrait;

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

Cela s'arrête la vidéo quand j'ai fermer la modale.
J'ai besoin de cette combinées en quelque sorte. J'ai besoin d'avoir le jeu automatique lorsque modale s'ouvre et arrêter de jouer quand modal ferme.

Toute indices?

Grâce.

OriginalL'auteur user2549830 | 2014-07-25

  1. 5

    J'ai essayé d'utiliser froogaloop2 mais il revenait toujours cette erreur:
    Impossible de lire la propriété "prêt" undefined

    Au lieu de cela, vous pouvez simplement utiliser postMessage appeler play et pause sur la vidéo à l'intérieur de la 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);
  });
});

    OriginalL'auteur Martin Drapeau

  2. 2

    Que j'ai accompli cela en appelant à la fois le Bootstrap Modale de l'API et Vimeo API, code ci-dessous. Vous aurez besoin d'inclure Vimeo est Froogaloop script, également en dessous.

    <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');
})

    OriginalL'auteur eroedig

  3. -1

    Reportez-vous à Vimeo est l'incorporation de la documentation.

    Il est un attribut que vous pouvez définir appelé autoplay. Elle note qu'il pourrait ne pas fonctionner sur certains appareils, mais que la définition de cet attribut pour 1 (ou peut-être true) devrait aider.

    Le code pourrait ressembler à quelque chose comme ceci:

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

    OriginalL'auteur Terry Robb