MediaElemement.js + Revelar JQuery Modal: Cómo pausar video/audio en ×

Question

¿Cómo hago una pausa simultáneamente del jugador y hago que el modal que contiene se deslice hacia arriba/fuera (para "no revele")?

Actualmente, después de hacer clic en el botón de reproducción, y la parte superior izquierda del Modal (x) ... el & #215; ... se hace clic ... el modal se desliza lejos, pero el video continúa jugando. Para evitar esto, el usuario debe: 1) Pausar el video y luego 2) cerrar el modal. Me gustaría hacer clic o tocar cualquiera de los desencadenantes del Modal, por ejemplo, hacer clic en (x), para hacer ambas acciones al mismo tiempo. Estoy tratando de encontrar una solución que funcione en plataformas / dispositivos.

Esto es lo que tengo hasta ahora, que no está funcionando ...

En Head of Dom entre las etiquetas de guión

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

Activar para revelar modal

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

Video + contenedor 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>

Ya probé muchas otras soluciones, incluidas ...

JavaScript para detener la reproducción de video HTML5 en la ventana modal Cerrar

...Asi que se agradece cualquier ayuda. Creo que es posible que el archivo MEDEALELEMENT.JS o Revel.js sea necesario modificar o algo así.

Por cierto, hacer clic en cualquier lugar fuera del modal, en el "brillo", hace que se deslice hacia arriba/fuera; Golpear la tecla de escape en el teclado hace lo mismo. Al hacer clic en cualquier parte del reproductor de video, hace que se detenga. Me encantaría si todas estas funciones se conservan junto con los dispositivos móviles. (No he probado eso todavía).

Answer 1

Lo tengo resuelto con este guión ...

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

Había múltiples videos de medias de medias. Intenté cambiar eso en mi guión original de GetElementByid a GetElementByName ... no funcionó. Creó una clase en lugar de una identificación para cada jugador ...que no funcionó. Irrendemos sin lugar de los problemas de validación: la solución anterior, simplemente insertar la clase .close-reveal-modal directamente en el script "detener todo" para mediaselement.js funciona muy bien. (Gracias @fabrizio por sugerir que examino mis atributos de identificación para comenzar con ...)

Answer 2

si usted tiene document.getElementById("pauseX").onclick... En la parte superior de su documento, probablemente el código no funciona porque el elemento con ID pauseX ya no está en el DOM. Mire la consola JavaScript, debería ver algún error relacionado

Intente mover estas instrucciones en la parte inferior o en el evento Dom Ready