(Solucionado) ¿Cómo Detengo El Video? (Ventana Modal)

  • Autor Autor An6oro
  • Fecha de inicio Fecha de inicio
An6oro

An6oro

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola, no tengo grandes conocimientos sobre este mundillo del lenguaje de programación, tengo un blog, y a base de retocar y ver tutoriales durante años, puedo solucionar ciertas cosillas por ahí, pero ya me estresé mucho y no me resultaron los intentos.
La situación es que he diseñado una galería, y la idea es que al pinchar en cada columna se abra una ventana modal que reproduzca el vídeo, pero el vídeo sigue reproduciéndose cuando cierro la ventana, y supongo que necesito una línea de código JavaScript, con algún ID, Este problema es bastante común por lo que veo, todo lo que vi estaba en inglés o más bien enfocado a un caso particular, y no tenía los conocimientos suficientes para adaptarlo a mi situación.

Aquí pueden ver que una vez inicie la reproducción, pinche constantemente en la primera columna para cerrar el contenido, pero por mucho que la cierre, sigue como si nada:
w0BOBIY.gif

si alguno me podría dar una idea por donde atacar el problema, o probar algunos códigos, trataré de seguir las instrucciones
pd: uso Bootstrap Studio
 
@Amovi el reproductor que usas tiene que tener su api javascript para pausar el video.
Si no , puede hacer algo como esto.

JavaScript: 
document.getElementById('video_id').pause();
www.w3schools.com

HTML Audio/Video DOM Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
 
@YeltsinReyes Hola, gracias por responder, intente probar el método durante un rato, pero a buenas y primeras no me resulto, mi problema es que no sé muy bien como enlazar bien las id, mira esta es mi perspectiva, la interfaz general:

UwvZWki.png

Aquí meto mano a la sección en concreto:

8zoeS0i.png

Aquí el video en una estructura básica de HTML, uso playerjs.com:

9ILe8ov.png

Y aquí suelo agregar los scripts, y probé tu código, pero no funciona, todo mi instinto me dice que quizás solo sea problema de no saber manejar la ID correcta:

dgHFfkp.png

¿A qué le podría poner un ID?, ¿cuál de todas esas secciones?, ahí me pierdo
PD: Y sobre la API del reproductor, aquí hay información al respecto, pero no entiendo del todo bien como usarla
 
No entiendo ese editor que usas, pero la cosas es que cuando den click a la X para cerrar el modal pausar el video.

JavaScript: 
let cerrar_modal = document.getElementById('cerrar_modal');
cerrar_modal.addEventListener('click', function(){

    player.api('play');
   
}, false);
 
No me funciona, y es que la ventana modal, no tiene interacción directa con el video en sí, yo solo agregue un HTML externo dentro del modal, la crucecita esa ni se entera de lo que hay dentro del recuadro, creo que solo sirve de 'body' para poner lo que sea

zo5AuCh.png

Este es el HTML por si acaso:

HTML: 
<!DOCTYPE html>
<html lang="es" dir="ltr">
    <head>
        <meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/gh/xhdtv/xp@main/playerjs.js" type="text/javascript"></script>
</head>
<body>
<div id="player"></div>

<script>
   var player = new Playerjs({id:"player", file:"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"});
</script>
</body>
</html>
 
Solo tienes que agregar o modificar el listener del evento con el que cierras la ventana modal para llamar player.api('stop');

Por ejemplo:

HTML: 
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/gh/xhdtv/xp@main/playerjs.js" type="text/javascript"></script>
</head>
<body>

    <button type="button" name="button" class="cerrar">Detener</button>

    <div id="player"></div>

    <script>
        const player = new Playerjs({id:"player", file:"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"});
        const cerrar = document.body.querySelector('.cerrar');

        if (cerrar !== null) {
            cerrar.addEventListener('click', () => {
                player.api('stop');
            });
        }
    </script>
</body>
</html>
 
Hola @Alfredo Ramos , lo probé y ahora aparece un botoncito, funciona lo que es detener, pero no cierra la ventana modal, solo aplica 'stop' y ya, lo ideal seria que haga stop y cierre al mismo tiempo, porque apretó la x de cerrar, y sigue reproduciéndose de fondo

jDmhHH5.jpg
 
Después de experimentar cambiando cosas por aquí y por allá, se me ocurrió cambiar las 'class' por la que tiene la X de cerrar el modal, y funciono ( detener y cerrar ), aunque aparecían dos X en distintos lugares, pero con un poco de CSS logre ocultar la otra...
caso resuelto, gracias a ambos!

gdxDPZT.gif


HTML: 
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/gh/xhdtv/xp@main/playerjs.js" type="text/javascript"></script>
</head>
<body>

    <button type="button" name="button" class="btn-close2"></button>

    <div id="player"></div>

    <script>
        const player = new Playerjs({id:"player", file:"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"});
        const cerrar = document.body.querySelector('.btn-close2');

        if (cerrar !== null) {
            cerrar.addEventListener('click', () => {
                player.api('stop');
            });
        }
    </script>
</body>
</html>
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba