Cómo Personalizar un Reproductor de Video con Selección de Calidad Usando Node.js y EJS

Personalizar un reproductor de video puede ser un desafío, especialmente cuando se quiere incluir características como la selección de calidad. En este artículo, te mostraremos cómo hacerlo utilizando Node.js y EJS. Si estás buscando un modo eficiente para implementar esta funcionalidad, sigue nuestros pasos y consejos.

1. Preparación del Entorno

Antes de comenzar, asegúrate de tener instalado Node.js en tu sistema. También necesitarás un framework como Express para manejar las solicitudes y respuestas del servidor, junto con EJS para renderizar vistas.

Instalación de Dependencias

Para empezar, instala las dependencias necesarias:

npm install express ejs video.js

2. Configuración del Servidor

A continuación, crearemos un archivo server.js, que se encargará de servir nuestra aplicación y de enviar los enlaces de video en formato M3U8 a la vista EJS.

Código del Servidor

const express = require('express');
const app = express();
const PORT = 3000;

app.set('view engine', 'ejs');

app.get('/anime', (req, res) => {
    const animeData = { animePoster: 'url_to_poster_image.png' };
    const sources = [
        { url: 'link_to_360p.m3u8', isM3U8: true, quality: '360p', isDub: false },
        { url: 'link_to_720p.m3u8', isM3U8: true, quality: '720p', isDub: false },
        { url: 'link_to_1080p.m3u8', isM3U8: true, quality: '1080p', isDub: false }
    ];
    res.render('anime', { animeData, sources });
});

app.listen(PORT, () => {
    console.log(`Servidor en ejecución en http://localhost:${PORT}`);
});

3. Creación de la Vista EJS

El siguiente paso es crear el archivo anime.ejs. Este archivo contendrá el reproductor de video y un menú desplegable para seleccionar la calidad.

Código de anime.ejs

<div class="col-lg-6 videoplayer no_variable_height">
    <video id="video-player" controls width="640" height="360"
        poster="<%= animeData.animePoster %>">
    </video>

    <select id="quality-selector">
        <% sources.forEach(source => { %>
            <option value="<%= source.url %>"><%= source.quality %></option>
        <% }); %>
    </select> <!-- Dropdown para seleccionar calidad -->
</div>

4. Integración de Video.js

Para mejorar la experiencia del usuario, utilizaremos Video.js, una biblioteca popular de JavaScript para reproductores de video. En la sección de scripts de tu archivo EJS, añade el siguiente código para inicializar el reproductor y habilitar la selección de calidad.

Código de JavaScript en anime.ejs

<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
    var player = videojs("video-player", {
        controls: true,
        autoplay: false,
        preload: "auto",
        fluid: true,
        controlBar: {
            volumePanel: { inline: false },
            pictureInPictureToggle: true,
            fullscreenToggle: true
        }
    });

    // Manejo de la selección de calidad
    document.getElementById('quality-selector').addEventListener('change', function() {
        var selectedQuality = this.value;
        player.src({ src: selectedQuality, type: 'application/x-mpegURL' });
        player.play();
    });
});
</script>

5. Resultado Final

Con estos pasos, habrás creado un reproductor de video personalizado con la opción de selección de calidad. La interfaz será intuitiva y ofrecerá a los usuarios la capacidad de elegir la calidad de video que prefieran.

Para ver el resultado en acción, simplemente ejecuta tu servidor y navega a http://localhost:3000/anime. Deberías ver un reproductor de video funcional con opciones de calidad despegables.

Conclusión

Personalizar un reproductor de video en Node.js utilizando EJS es un proceso que, aunque requiere atención al detalle, es bastante accesible. Siguiendo las pautas que hemos compartido, podrás crear una experiencia de usuario enriquecedora con la funcionalidad de selección de calidad. ¡No dudes en experimentar con otras características y mejoras para tus proyectos futuros!