Reproductor con opciones para series, novelas, animes – HTML gratis

Introducción: ¿Qué es un reproductor?

Un reproductor es una herramienta que permite a los usuarios ver contenido audiovisual en línea o de manera local, ofreciendo controles de navegación como play, pausa, avance, retroceso, y en algunos casos opciones de servidor. En el caso del Reproductor con opciones para series, novelas y animes, su objetivo es facilitar la visualización de episodios organizados por temporadas y servidores de transmisión, brindando una experiencia accesible y flexible para el espectador.

¿Qué es una serie?

Una serie es una obra audiovisual compuesta de varios episodios que siguen una narrativa o temática en común. Las series pueden dividirse en temporadas, con cada temporada representando una colección de episodios lanzados en un periodo específico. Este reproductor está diseñado para gestionar y visualizar los episodios de cada temporada, ideal para contenido como series de televisión, animes, novelas y otros formatos similares.

¿Qué son los episodios?

Un episodio es una entrega individual dentro de una serie que presenta parte de la narrativa o historia. En una serie o anime, los episodios avanzan la historia y pueden incluir diferentes tramas o personajes. El reproductor está optimizado para organizar y permitir la selección de episodios fácilmente, además de brindar acceso a distintas opciones de servidor.

¿Qué contiene el código?

El código de este reproductor incluye:

• HTML para la estructura de las temporadas y episodios.
• JavaScript para la funcionalidad del reproductor y la navegación entre episodios.
• CSS para el diseño visual y estilos, brindando una apariencia moderna y accesible.

Con estos elementos, el reproductor se presenta de manera organizada y fácil de integrar en cualquier sitio web.

¿Cómo funciona el reproductor?

El reproductor se activa al seleccionar un episodio y permite navegar por diferentes episodios y temporadas sin necesidad de recargar la página. Algunas de las características de funcionamiento son:

• Selector de temporadas: Permite elegir una temporada específica.
• Opciones de servidor: Al seleccionar un episodio, puedes elegir entre diferentes servidores de transmisión.
• Navegación de episodios: Botones “Anterior” y “Siguiente” para moverse entre episodios.
• Popup de reproducción: Un popup donde se visualiza el contenido y los controles de navegación.

Facilidades que proporciona el reproductor

El reproductor ofrece una serie de facilidades para optimizar la experiencia de visualización:

1. Fácil organización de contenido: Organiza episodios en temporadas, ideal para series largas.
2. Opciones de servidor: Posibilidad de seleccionar entre diferentes servidores, proporcionando alternativas de calidad de streaming.
3. Controles de navegación: Botones para avanzar o retroceder entre episodios sin salir del reproductor.
4. Interfaz intuitiva: Los usuarios pueden encontrar y reproducir episodios fácilmente, con un diseño amigable.

¿Cuántas opciones puedo colocar por reproductor?

Cada episodio puede tener hasta 10 opciones de servidor. Esto permite a los usuarios elegir entre múltiples fuentes para mejorar su experiencia de visualización, especialmente útil en caso de que un servidor no esté disponible o tenga problemas de carga.

¿Cómo instalarlo en Blogger?

ingresamos al panel de Blogger, accedemos a la sección TEMA, luego pulsamos en el icono que se encuentra al costado del botón Personalizar, se nos desplegará un menú, pulsamos en EDITAR HTML, se nos abrirá el codigo fuente de nuestro blog, alli buscamos </head> y justo arriba pegamos el codigo correspondiente a los estilos o CSS

Luego buscamos o ubicamos el </body> el cual mayormente se ubica en la parte final del código fuente, y justo arriba colocamos este código script, el cual hará que funcione nuestro reproductor

Puedes descargar el codigo script pulsando en el siguiente boton:

Finalmente, nos tocará agregar el codigo HTML en la entrada o página de nuestro blog, es decir en el lugar donde queremos que aparezca la lista de temporadas y episodios con el reproductor.

Para ello vamos a crear una nueva entrada o página, activamos la vista en HTML y pegamos el código que dejo a continuación:

Puede descargar el codigo HTML pulsando en el siguiente botón:

También puede descargar todos los codigos completos en el siguiente boton para no perderse ninguno y que el reproductor funcione correctamente:

Espero sepan disculpar por los anuncios no esperados, dependemos de ello para seguir adelante, espero su mas sincera comprensión.

¿Cómo agregar más temporadas?

Para agregar más temporadas, solo necesitas agregar nuevos elementos HTML y el código JavaScript ya está preparado para manejar temporadas adicionales.

1. Paso 1: Agregar el Botón de la Temporada
   • En el HTML, dentro de la sección de temporadas, añade un nuevo div para la temporada adicional.
   • Asegúrate de asignarle un id y un nombre de clase únicos (ej. temporada4).

<div class="temporadas">
    <div id="temporada1" class="active" onclick="mostrarEpisodios('temporada1', this)">Temporada 1</div>
    <div id="temporada2" onclick="mostrarEpisodios('temporada2', this)">Temporada 2</div>
    <div id="temporada3" onclick="mostrarEpisodios('temporada3', this)">Temporada 3</div>
    <div id="temporada4" onclick="mostrarEpisodios('temporada4', this)">Temporada 4</div> <!-- Nueva temporada -->
</div>

Paso 2: Crear la Lista de Episodios de la Nueva Temporada

• Añade una nueva sección de episodios, utilizando la clase de temporada correspondiente (temporada4 en este caso).
• Cada episodio debe tener la clase episodio para que el reproductor los reconozca.

<div class="episodios-temporada temporada4" style="display: none;">
    <ul>
        <li class="episodio" 
            data-servidor-1="Opción 1" 
            data-server-embed-1="https://www.youtube.com/embed/example1"
            >
            <img src="https://image.tmdb.org/t/p/w300/example.jpg" alt="Episodio 1">
            <div class="episode__info">
                <h4 class="episodio-titulo">Episodio 1</h4>
            </div>
        </li>
        <!-- Más episodios de la temporada 4 -->
    </ul>
</div>

3. Paso 3: Guardar y Probar
   • Guarda los cambios y abre tu página web. Haz clic en el botón de la nueva temporada y verifica que los episodios se muestren correctamente.

El reproductor está listo para admitir cualquier cantidad de temporadas sin más modificaciones en el código JavaScript.

Cómo Agregar Más Listas de Episodios

Para agregar más listas de episodios a una temporada específica o a una nueva temporada, solo necesitas duplicar y modificar el HTML de episodios.

1. Paso 1: Seleccionar la Temporada
   • Ve a la sección correspondiente de episodios de la temporada donde deseas agregar más episodios.
2. Paso 2: Agregar Nuevos Episodios
   • Copia el código de un li de episodio existente y pégalo para agregar un nuevo episodio. Cambia los detalles (como el enlace de video y el número de episodio) para que cada uno sea único.

<div class="episodios-temporada temporada1">
    <ul>
        <li class="episodio" 
            data-servidor-1="Opción 1" 
            data-server-embed-1="https://www.youtube.com/embed/example2"
            >
            <img src="https://image.tmdb.org/t/p/w300/example.jpg" alt="Episodio 4">
            <div class="episode__info">
                <h4 class="episodio-titulo">Episodio 4</h4>
            </div>
        </li>
        <!-- Más episodios de la temporada 1 -->
    </ul>
</div>

3. Paso 3: Verificar el Funcionamiento
   • Guarda los cambios y abre tu página para comprobar que el nuevo episodio aparece correctamente y es accesible en el reproductor.

El reproductor gestionará automáticamente los episodios adicionales de cada temporada.

Cómo Agregar Más Opciones de Reproducción

Cada episodio permite agregar múltiples opciones de reproducción para que los usuarios elijan el servidor de su preferencia. Sigue estos pasos para añadir opciones adicionales a un episodio.

1. Paso 1: Identificar el Episodio al que Quieres Agregar Opciones
   • Encuentra el li del episodio en el que deseas agregar opciones de servidor.
2. Paso 2: Agregar Nuevas Opciones de Reproducción
   • Añade atributos data-servidor-x y data-server-embed-x adicionales (reemplaza x por el número de la opción). Puedes añadir hasta 10 opciones por episodio.

<li class="episodio" 
    data-servidor-1="Opción 1" 
    data-server-embed-1="https://www.youtube.com/embed/example1"

    data-servidor-2="Opción 2" 
    data-server-embed-2="https://www.youtube.com/embed/example2"

    data-servidor-3="Opción 3" 
    data-server-embed-3="https://www.youtube.com/embed/example3"

    data-servidor-4="Opción 4" 
    data-server-embed-4="https://www.youtube.com/embed/example4"
    >
    <img src="https://image.tmdb.org/t/p/w300/example.jpg" alt="Episodio 1">
    <div class="episode__info">
        <h4 class="episodio-titulo">Episodio 1</h4>
    </div>
</li>

3. Paso 3: Guardar y Probar

• Guarda los cambios y verifica que las opciones adicionales aparezcan al abrir el episodio en el reproductor. Cada opción debe ser seleccionable en el popup de reproducción.

Este reproductor permite hasta 10 opciones de servidor por episodio, y puedes ajustar cada opción en función de tus necesidades.