Luego de tanto batallar ya dimos con el resultado de esta escollo que tantos lectores de esta web han tenido. Si quieres compartir alguna información no dejes de aportar tu conocimiento.
Solución:
Esto me funcionó para pausar el carrusel de Bootstrap cuando se está reproduciendo un video HTML5 nativo y reproducirlo nuevamente cuando un video está en pausa o termina de reproducirse. Soy un novato total en JS, pero busqué y ensarté algunas cosas. Es posible que haya cometido un error (probablemente) pero me funciona.
No estoy llamando videos por ID porque quiero que la acción funcione en cualquier video que se esté reproduciendo en el carrusel. Tengo algunos en mi caso.
Tenga en cuenta que debe cambiar la ID del carrusel para que coincida con la suya.
$ (“# myCarousel”). carrusel (‘pausa’); para detenerlo $ (“# myCarousel”). carousel (); para iniciarlo de nuevo http://www.w3.org/2010/05/video/mediaevents.html hay muchos eventos, debe iniciarlo de nuevo, incluso pausar, los eventos terminados se activan y pausar la reproducción.
para youtube, no estoy seguro de cómo lo integras, pero tienen js api, así que https://developers.google.com/youtube/js_api_reference#Events te mostrará eventos que puedes escuchar y hacer lo mismo que hiciste con el video html5
Para que los videos iframe de Youtube activen una pausa en el deslizamiento del carrusel cada vez que se reproduce un video, debe tener un indicador de si un video se considera “reproduciéndose”. Puede lograr esto utilizando las funcionalidades del reproductor de la API de iframe de Youtube con JavaScript.
- https://developers.google.com/youtube/iframe_api_reference
- https://developers.google.com/youtube/iframe_api_reference#Playback_status
- https://developers.google.com/youtube/iframe_api_reference#Events
Escuche los eventos que involucran estos estados:
- YT.PlayerState.PLAYING
- YT.PlayerState.BUFFERING
Y luego controla el carrusel Bootstrap deslizándose .carousel('pause') :
- https://getbootstrap.com/docs/4.4/components/carousel/#methods
Para poder escuchar tales eventos, puede agregar a su JavaScript una función llamada “onPlayerStateChange” (como se describe en la API de iframe de Youtube):
function onPlayerStateChange(event) // triggered everytime ANY iframe video player among the "players" list is played, paused, ended, etc.
// Check if any iframe video is being played (or is currently buffering to be played)
// Reference: https://developers.google.com/youtube/iframe_api_reference#Events
if (event.data == YT.PlayerState.PLAYING
Como referencia, aquí está el HTML de trabajo completo (funciona directamente, no se necesitan modificaciones):
Sección de Reseñas y Valoraciones
Tienes la opción de amparar nuestra tarea ejecutando un comentario o puntuándolo te estamos eternamente agradecidos.