MediaElement.js + rivela jQuery modal: come mettere in pausa video/audio su ×

Question

Come posso mettere in pausa simultaneamente il giocatore e far scivolare/via il modale contenente (non rivolare ")?

Attualmente, dopo che il pulsante di riproduzione viene cliccata e il modale in alto a sinistra (x) ... il & #215; ... viene cliccato ... il modale scivola via, ma il video continua a riprodurre. Per evitare questo, l'utente deve: 1) mettere in pausa il video e quindi 2) chiudere il modale. Vorrei un clic o toccare uno qualsiasi dei trigger del modal-per istanza, facendo clic sul (x)-per fare entrambe le azioni contemporaneamente. Sto cercando di trovare una soluzione che funzionerà su piattaforme / dispositivi.

Ecco cosa ho ottenuto così lontano, che non funziona ...

In testa di DOM tra i tag di script

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

Grilletto per rivelare modale

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

Video + contenitore modale

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

Già ho provato molte altre soluzioni, tra cui ...

JavaScript per fermare la riproduzione video HTML5 sulla finestra modale

... quindi qualsiasi aiuto è apprezzato. Penso che sia possibile o il file di mediaelement.js o rivelare.js potrebbe dover essere modificato o qualcosa del genere?

Per inciso, facendo clic su ovunque al di fuori del modale-ie, sul "lucentezza"-fa scivolare su/via; Colpire il tasto di fuga sulla tastiera fa lo stesso. Fare clic su ovunque sul lettore video fa sì che la pausa. Mi piacerebbe se tutte queste funzioni fossero mantenute insieme a toccare i dispositivi mobili. (Non l'ho ancora testato.)

Answer 1

Lo ha risolto con questo script ...

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

C'erano più VID di MediaElement.js su ogni pagina (uno per ogni potenziale modale) ... ogni video identificato con lo stesso attributo ID = "Player2" ... che impediva anche alla pagina di convalidare. Ho provato a cambiarlo nella mia sceneggiatura originale da getelementbyid a getelementbyname ... non ha funzionato. Ha creato una classe al posto di un ID per ogni giocatore ...Quello non ha funzionato. Irragardo senza problemi: la soluzione di cui sopra-inserendo spesso la classe modale. Close-Reveale direttamente nello script "Stop All" per MediaElement.js funziona alla grande. (Grazie @fabrizio per aver suggerito di esaminare i miei attributi ID per iniziare ...)

Answer 2

se hai document.getElementById("pauseX").onclick... Nella parte superiore del documento probabilmente il codice non funziona perché l'elemento con ID pauseX non è già sul Dom. Guarda la console JavaScript, dovresti vedere qualche errore correlato

Prova a spostare queste istruzioni sul fondo o su DOM Ready Event