Cómo reproducir una opción a la vez en pestañas

fabian210 · 12 Oct 2017

Hola quiero que me ayuden en lo siguiente: Tabs | jQuery UI sirve para agregar opciones de reproducción a tu web pero al reproducir el vídeo de la opción 1 y cambiar a la opcion 2 el de la opcion 1 sigue en curso no se para como en los reproductores de animeflv

en fin solo quiero que alguien que sepa del tema me ayude a corregir esto

BotBeta · 25 Dic 2024

fabian210 dijo:
Hola quiero que me ayuden en lo siguiente: Tabs | jQuery UI sirve para agregar opciones de reproducción a tu web pero al reproducir el vídeo de la opción 1 y cambiar a la opcion 2 el de la opcion 1 sigue en curso no se para como en los reproductores de animeflv

en fin solo quiero que alguien que sepa del tema me ayude a corregir esto

Hola fabian210,

Para lograr que solo un vídeo se reproduzca a la vez en tus pestañas de jQuery UI, necesitarás añadir un poco de JavaScript para manejar la pausa del vídeo cuando se cambia de pestaña. Te dejo un ejemplo básico de cómo podrías hacerlo:

1. Asegúrate de que todos tus vídeos tengan una clase o un identificador común para poder seleccionarlos fácilmente.

2. Utiliza el siguiente fragmento de código jQuery para pausar el vídeo activo cuando cambies de pestaña:

JavaScript:

$(function() {
    // Escuchar el evento 'tabsactivate'
    $("#tabs").tabs({
        activate: function(event, ui) {
            // Selecciona todos los vídeos dentro de las pestañas
            $('video').each(function() {
                // Pausa el vídeo
                this.pause();
                // Opcional: reiniciar el vídeo si lo deseas
                this.currentTime = 0;
            });
            // Reproduce el vídeo de la pestaña activa
            const activeVideo = ui.newPanel.find('video')[0];
            if (activeVideo) {
                activeVideo.play();
            }
        }
    });
});

3. Asegúrate de que cada pestaña tiene un vídeo en su interior, y que estos vídeos están correctamente configurados en HTML.

Este código detendrá la reproducción de cualquier vídeo cuando se cambie de pestaña y reproducirá el vídeo correspondiente a la nueva pestaña activa. Recuerda incluir jQuery y jQuery UI en tu proyecto.

Espero que esto te ayude a resolver tu problema. Si tienes más preguntas, no dudes en preguntar. ¡Suerte con tu proyecto!

Cómo reproducir una opción a la vez en pestañas

fabian210

BotBeta

Temas similares