MediaElement.js + révéler jQuery Modal: comment faire une pause vidéo / audio sur & # 215;

Question

Comment puis-je mettre en pause simultanément le joueur et faire glisser / glisser le modal contenant (à "non-révélateur")?

Actuellement, une fois le bouton de lecture cliqué, et le haut-gauche du modal (x) ... le & # 215; ... est cliqué ... le modal glisse, mais la vidéo continue de jouer. Pour éviter cela, l'utilisateur doit: 1) Pause la vidéo, puis 2) Fermez le modal. Je voudrais un clic ou appuyer sur l'un des déclencheurs du modal - par exemple, en cliquant sur (x) - pour faire les deux actions en même temps. J'essaie de trouver une solution qui fonctionnera sur les plateformes / appareils.

Voici ce que j'ai obtenu jusqu'à présent, ce qui ne fonctionne pas ...

Dans la tête de Dom entre les balises de script

      document.getElementById("pauseX").onclick = function () {
      document.getElementById('player2').pause();
      };

Déclencheur pour révéler modal

   <a href="#" data-reveal-id="vid-1">Click here to reveal modal.</a>

Vidéo + conteneur modal

   <div id="vid-1" class="reveal-modal">
       <div class="center">
           <video width="480" height="270" id="player2" poster="../media/vid-1.jpg" controls="controls" preload="none">
               <source type="video/mp4" src="../media/vid-1-480x320.mp4" />
               <source type="video/webm" src="../media/vid-1-640x480.webm" />
               <object width="480" height="270" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">         
                   <param name="movie" value="../build/flashmediaelement.swf" /> 
                   <param name="flashvars" value="controls=true&amp;file=../media/vid-1-480x320.mp4" />         
                   <img src="../media/vid-1.jpg" width="480" height="270" alt="Vid 1" 
        title="No video playback. Update browser, enable Javascript, or install Flash." />
               </object>    
           </video>
          </div>
          <a id="pauseX" class="close-reveal-modal">&#215;</a>
   </div>

Déjà essayé de nombreuses autres solutions, y compris ...

JavaScript pour arrêter la lecture vidéo HTML5 sur la fenêtre modale Fermer

... donc toute aide est appréciée. Je pense qu'il est possible que le fichier mediaealiment.js ou révélate.js puisse devoir être modifié ou quelque chose?

Soit dit en passant, en cliquant n'importe où en dehors du modal - IE, sur le "brillant" - le fait glisser / loin; Frapper la touche d'échappement sur le clavier fait de même. Cliquer n'importe où sur le lecteur vidéo le fait s'arrêter. J'adorerais que toutes ces fonctions soient conservées avec un tapotement sur des appareils mobiles. (Je n'ai pas encore testé cela.)

Answer 1

Je l'ai résolu avec ce script ...

<script>
    $('.close-reveal-modal').click(function() {
        $('video, audio').each(function() {
            $(this)[0].player.pause();        
        });
    });
</script>

Il y avait plusieurs vidéos MediaElement.js sur chaque page (une pour chaque modal potentiel) ... chaque vidéo étant identifiée avec l'attribut id = "player2" ... qui empêchait également la page de valider. J'ai essayé de changer cela dans mon script original de GetElementByid à GetElementByName ... n'a pas fonctionné. Créé une classe au lieu d'un ID pour chaque joueur ...ce n'a pas fonctionné. Impusque des problèmes de validation: la solution ci-dessus - insérant simplifié la classe .close-reveal-modal directement dans le script "Stop all" pour mediaelement.js fonctionne très bien. (Merci @fabrizio d'avoir suggéré que j'examine mes attributs d'identification pour commencer ...)

Answer 2

si tu as document.getElementById("pauseX").onclick... En haut de votre document, le code ne fonctionne probablement pas parce que l'élément avec ID pauseX n'est pas déjà sur le DOM. Regardez la console JavaScript, vous devriez voir une erreur connexe

Essayez de déplacer ces instructions en bas ou sur l'événement DOM Prêt