3

Sin usar jQuery, ¿Cómo podría hacer que el video dentro un modal, se reproduzca automáticamente al abrir el modal, y detener el video al cerrar el modal?

Solo encuentro respuestas que hacen uso de jQuery, acaso no es posible hacerlo con Vanilla JavaScript?

PD: Estoy usando Bootstrap en su version 5.2, según la documentación sobre eventos JS, puedo controlar qué hacer al abrir el modal y cerrarlo con

hidden.bs.modal
shown.bs.modal

Esto funciona, pero si hago algo como:

document.getElementById('myVideo').pause();

No funciona, también intenté como evento onClick, sobre el botón que cierra el modal, así:

onclick="this.paused?this.play():this.pause();"

const myModalOpen = document.getElementById('exampleModal')
exampleModal.addEventListener('shown.bs.modal', event => {
  console.log('Abierto y autoplay');
})


const myModalClose = document.getElementById('exampleModal')
exampleModal.addEventListener('hidden.bs.modal', event => {
  console.log('Cerrado y stop');
})
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>




<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="ratio ratio-16x9">
          <iframe id="myVideo" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" title="Video" allowfullscreen></iframe>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

2 respuestas 2

4
+50

El problema es que estás insertando el video como un iframe y en principio no tenés control de su reproducción. Si el video fuera de una plataforma en particular (supongamos YouTube), entonces habría que ver cómo utilizar alguna de sus APIs para controlarlo.

Si reemplazás el iframe por un video entonces sí podés controlar la reproducción.

const exampleModal = document.getElementById('exampleModal');
const myVideo = document.getElementById('myVideo');

exampleModal.addEventListener('shown.bs.modal', event => {
  console.log('Abierto y autoplay');
  myVideo.play();
});


exampleModal.addEventListener('hidden.bs.modal', event => {
  console.log('Cerrado y stop');
  myVideo.pause();
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="ratio ratio-16x9">
          <video id="myVideo" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" title="Video" controls></video>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

4

Es tan fácil como agregar tres líneas más de código JS y ya está.

Pero antes que nada, no mencionaste nada sobre el iframe, que de lo cual, para mi opinión (sin saber exactamente como se presentará el o los vídeos en tu página); está demás.

Yo sugiero usar directamente una etiqueta video y darle estilo y más funciones personalizado.

Uno y el primero es:

const video = document.querySelector("video");

Por supuesto, también puede ser: const video = document.getElementBiId("video"); si hay una ID.

Segundo, cuando se llama al modal, también se agrega el evento play al vídeo, tan simple como:

video.play();

Lo mismo y tercero, al cerrar el modal también se debe indicar un pause del vídeo:

video.pause();
//video.currentTime = 0;

const myModalOpen = document.getElementById('exampleModal'); 
const video = document.querySelector("video"); 
const myModalClose = document.getElementById('exampleModal'); 

exampleModal.addEventListener('shown.bs.modal', event => {
  video.play();
  console.log('Abierto y autoplay');
});

exampleModal.addEventListener('hidden.bs.modal', event => {
  video.pause();
  //video.currentTime = 0;
  console.log('Cerrado y stop');
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>




<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        
       <video controls="" style="width:100%">
           <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
       </video> 
       
       
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Para concluir, agregué (comentado) un video.currentTime = 0 para que, al volver abrir el modal, el vídeo se reproduzca nuevamente.

Espero que te ayude. Saludos

1
  • Caballero, muy amable con su ayuda. Acepté la otra respuesta únicamente porque contestó 1ro, pero su respuesta es igualmente válida. Agradezco la observacion sobre video.currentTime, gracias nuevemente por su valiosa ayuda
    – Alvamon6
    Commented el 26 jul. 2022 a las 21:17

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.