1

Cordial Saludo.

Tengo un modal con materialize css y dentro de el muestro un video, lo que sucede es que al cerrar el modal el video se queda reproduciendo por debajo, necesito que cuando el modal este cerrado el video no se reprodusca.

He probado varios códigos y no me han funcionado.

Gracias.

<!-- MODAL DE MATERIALIZE -->

<div id="Video_Modal" class="modal mdl_general modal-video">
            <div class="modal-content">
                <video class="video_modal" id="video" src="Videos/VideoCronos.mp4" autoplay controls>
                    Tu navegador no soporta el elemento <code>video</code>
                </video>
            </div>
            <div class="modal-footer">
                <a href="#!" class="modal-close waves-effect waves-green btn-flat">Cerrar</a>
            </div>
        </div>

3 respuestas 3

1

Saludos podrias usar algo de javascript, jquery:

$('#Video_Modal').modal({
      dismissible: true,
      onCloseEnd: function() { 
        console.log('modal cerrada'); 
        //apunto al ID  de mi video 
        var vid = document.getElementById("video_modal"); 
        //pauso el video
        vid.pause(); 
      } 
    }
  );

Espero te sirva..!!

Tambien podrias usar algo de jquery para pausar el video:

$('#video_modal').trigger('pause');

Para mayor referencia : options Modal

8
  • No me funciona al cerrar el modal se escucha aun el audio por debajo y la reproducción permanece. el 1 mar. 2019 a las 14:49
  • deberias agregar tu codigo para ver como esta y poder ayudarte..!! el 1 mar. 2019 a las 14:55
  • agregue el modal que uso con materialize el 1 mar. 2019 a las 15:13
  • podrias probar con el campo que lo hice..!! el 1 mar. 2019 a las 15:34
  • Ya lo he realizo y de igual forma el video se sigue reproduciendo por debajo el 1 mar. 2019 a las 15:40
0

Logre darle solución creando una función por JS que matara la acción con el siguiente código.

<script type="text/javascript">
    function stopVideo() {
        document.getElementById('video').pause();
    }
</script>

0

el problema es que al cerra el modal, el video se reproduce de fondo, para solucionar este problema puedes utilizar jquery. debes programar el boton cerrar, al hacer click en el boton cerrar eliminas el src del iframe de la siguiente manera:

$('.close-modal').click(() => {
$('.myFrame').removeAttr('src');
});```

ahora si vas al navegador y recargas vera que se cierra el modal y se cierra el video, pero si haces click en la referencia que dispara el modal, se desplegara el modal pero no se reproducira el video porque lo removimos hace un momento. Para dar solucion a este tema debes programar el enlace que llamama al modal de la siguiente manera:

$('.ImgVideo').click(() => {
$('.myFrame').attr('src', 'assets/Video/CuentoZlatan.mp4');
$("#ex1 ").modal({
escapeClose: false,
clickClose: false,
showClose: false
});
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.