Presentando el reproductor MYETV
El reproductor de vídeo MYETV es una experiencia multimedia basada en HTML5 moderna, diseñada para un inicio rápido, una interfaz de usuario limpia y una personalización profunda en superficies web y de televisión, continuando la evolución de la plataforma desde los reproductores HTML5 anteriores a una herramienta totalmente abierta y extensible. Construido con tecnologías web estándar, adopta subtítulos, capítulos, temas, plugins y una API de JavaScript documentada para que los equipos puedan integrarlo, comercializarlo y extender la reproducción de forma fiable en todos los dispositivos. El código base se lanzará como código abierto bajo la Licencia MIT en el repositorio oficial de GitHub para fomentar la revisión de la comunidad, las contribuciones y la reutilización.
Enlace de GitHub: https://github.com/OskarCosimo/myetv-video-player-opensource/
Enlace de demostración: https://oskarcosimo.com/myetv-video-player/myetv-player-demo.html
Licencia MIT a la vista
La Licencia MIT es una licencia de código abierto corta y permisiva que permite el uso, la copia, la modificación, la distribución, la sublicencia y el uso comercial, siempre que se conserve el aviso de copyright y la notificación de la licencia originales. El software- [Program/Software: the instructions that control what a computer does; computer programs] - se proporciona “tal cual”, sin garantías ni responsabilidad, lo que mantiene el cumplimiento claro y ligero para los desarrolladores individuales y las empresas. Esta combinación de flexibilidad y simplicidad es una de las principales razones por las que la MIT sigue siendo una de las licencias más populares para los proyectos de código abierto.
¿Por qué es de código abierto?
Hacer que el reproductor sea de código abierto bajo la MIT permite un desarrollo transparente, reduce el riesgo de bloqueo de proveedores y permite mejoras impulsadas por la comunidad, incluidos plugins e integraciones inspiradas en ecosistemas vibrantes que se ven en reproductores HTML5 ampliamente utilizados. Una licencia permisiva facilita la integración del reproductor en pilas comerciales o propietarias, al mismo tiempo que se contribuyen soluciones de solución de errores o mejoras según sea necesario. Este enfoque se alinea con la historia de MYETV de evolucionar las capacidades de reproducción y la interfaz de usuario para diversos entornos.
Arquitectura principal
El reproductor se basa en medios HTML5 y en las API web estándar, lo que proporciona una amplia compatibilidad y una implementación sencilla en los navegadores y las vistas web modernas. Gracias a los carriles y controles basados en estándares, admite subtítulos, capítulos y mejoras de la interfaz de usuario sin dependencias de tiempo de ejecución propietarias. Como resultado, se obtiene un comportamiento predecible, la extensibilidad y una base estable para funciones y ajustes de rendimiento personalizados.
Opciones de JavaScript
- Inicialización de la reproducción: la URL de origen(es), la reproducción automática, la precarga, el bucle, el silencio, la reproducción en pantalla completa, los logotipos de marca, los logotipos de marca de agua y el espejo de la imagen de fondo familiarizan las propiedades HTML5 para una configuración predecible.
- Configuración de la UX: opciones para la visibilidad de la barra de control, la disposición de los botones, el comportamiento del teclado, los tiempos de inactividad y las pistas de herramientas proporcionan un control fino de los patrones de interacción.
- Media handling: calidad de selección, menús de velocidad de reproducción y menús de seguimiento (audio/subtítulos) siguen las mejores prácticas vistas en reproductores y kits de herramientas establecidos.
- Callbacks de eventos: onReady, onPlay, onPause, onEnded, onError, onRateChange, onQualityChange, onCaptionChange habilitan la orquestación a nivel de aplicación y los enganches de análisis.
Temas SCSS y CSS
Las variables de tema y los enganches de clases CSS permiten colores, tipografía, espaciado, radios de esquinas y iconografía personalizados, lo que garantiza una alineación perfecta con los sistemas de marca del producto. Se admiten múltiples pieles mediante hojas de estilo ligeras para que una sola compilación pueda presentar diferentes apariencias en las propiedades o inquilinos. Los elementos de marca, como un pequeño logotipo de esquina o una marca de agua, se pueden aplicar a través de opciones o superposiciones CSS.
Logotipos totalmente personalizables
El reproductor cuenta con logotipos y marcas de agua totalmente personalizables.
Logotipo de marca: ubicado a la derecha de la barra de control, puede mostrarse a la izquierda de los botones. Se puede configurar con una URL de imagen (tamaño recomendado: altura 44px - ancho 120px), un enlace personalizado y hay una opción específica para mostrarlo o no.
Logotipo de marca de agua: posicionado según lo deseado en el video, se puede configurar con una URL de imagen (tamaño recomendado: ancho: 180px, altura: 100px), un enlace, una leyenda de enlace y hay una opción para establecer su posición (arriba a la izquierda, arriba a la derecha, abajo a la izquierda, abajo a la derecha).
Los logotipos son opcionales, tienen un extenso soporte de API y ya están insertados como una opción cuando se inicializa el reproductor, por lo que no se requiere ningún plugin.
Subtítulos: VTT y SRT
El reproductor admite trazas de texto con WebVTT para subtítulos y subtítulos, incluidos menús y estilos multilingües, aprovechando el modelo de traza estándar utilizado en la web. Los archivos WebVTT son fáciles de autorizar y mantener y están bien adaptados tanto para subtítulos como para capítulos, lo que los convierte en un ajuste natural para los flujos de trabajo de producción. Los flujos de trabajo que provienen de SRT pueden acomodarse convirtiéndolos a VTT o utilizando procesos de ingest que producen ambos formatos para una compatibilidad máxima.
Capítulos con imágenes
Los capítulos se habilitan mediante trazas de capítulo WebVTT, lo que permite una navegación rápida a través del contenido de formato largo con segmentos claramente etiquetados. El reproductor puede mostrar vistas previas visuales y miniaturas de imágenes junto con las entradas de capítulo para que la navegación sea más intuitiva y atractiva para las audiencias. Este enfoque simplifica la edición de contenido: los productores actualizan un lado VTT y imágenes, y la interfaz de usuario de capítulo se actualiza automáticamente.
Botones de la barra de control
- Reproducción: la reproducción/pausa, la búsqueda, la reproducción y las indicaciones de tiempo están presentes con atajos de teclado para la navegación eficiente.
- Audio: el silencio/desactivar el sonido y el control deslizante de volumen garantizan un control de sonido constante, con menús de seguimiento de audio opcionales cuando hay múltiples pistas presentes.
- Vista: pantalla completa y picture-in-picture se integran con las capacidades del navegador, y los modos teatro o ajuste se ajustan a las necesidades de diseño.
- Calidad y velocidad: los menús de bitrate/calidad y la selección de la velocidad de reproducción proporcionan a los usuarios la capacidad de influir en sus preferencias de red y comprensión.
- Subtítulos: un menú de subtítulos proporciona interruptores de encendido/apagado y selección de pistas, con un estilo que se alinea con las pautas de accesibilidad.
- Sobrecarga: un menú “más” personalizable alberga configuraciones avanzadas y acciones impulsadas por plugins para mantener la interfaz de usuario enfocada.
Reproductor de audio con visualización de onda
El reproductor también se puede utilizar como reproductor de audio solamente y tiene un sistema de visualización de onda de audio integrado sin necesidad de ningún plugin; el sistema aún se puede personalizar construyendo plugins separados. Dos opciones se establecen al inicializar el reproductor: “audiofile” (verdadero o falso) establece el reproductor como un reproductor de audio, mientras que “audiowave” (verdadero o falso) muestra la onda de audio en el espacio del video.
Sistema de plugins
La arquitectura del plugin expone puntos de enganche de ciclo de vida, puntos de inyección de la interfaz de usuario y suscripciones de eventos para que se puedan agregar nuevas funciones sin bifurcar el núcleo. Ejemplos incluyen señales de análisis, integraciones de publicidad a través de SDKs estandarizados, superposiciones de marcas de agua y botones personalizados para acciones específicas del dominio. Esto refleja ecosistemas abiertos exitosos donde los paquetes comunitarios amplían las capacidades del reproductor con el tiempo.
API de desarrollador
Una API concisa permite un control imperativo de la reproducción, la pausa, la búsqueda, el volumen, el silencio, la velocidad de reproducción, la fuente, el seguimiento, el estado y las promesas ready/error para un inicio suave. Los emisores de eventos reflejan la semántica de HTML5 para que el código de la aplicación pueda reaccionar a los cambios en el reproductor, la búferización, los errores, los cambios de seguimiento, los cambios de calidad y las transiciones de pantalla completa. La configuración se puede suministrar mediante JavaScript o atributos de datos, lo que permite patrones de inicialización tanto declarativos como program- [Program/Software: the instructions that control what a computer does; computer programs] - áticos.
Características de accesibilidad
Las subtítulosWebVTT y las pistas de capítulos mejoran la accesibilidad y la comprensión al tiempo que habilitan la navegación por teclado en la interfaz de usuario del reproductor. Los estados de enfoque claros, el contraste legible y el estilo de subtítulos ajustable admiten experiencias inclusivas de forma predeterminada. El soporte multilingüe sigue los metadatos de la pista y se alinea con las prácticas utilizadas por los reproductores de escritorio y de televisión establecidos.
Tematización y branding a escala
Las variables CSS globales permiten cambios rápidos en el color y la tipografía para que las marcas puedan mantener una identidad coherente en los reproductores incrustados en varios sitios o aplicaciones. Los patrones de pieling proporcionan una mayor separación entre la lógica y el estilo, simplificando el mantenimiento y la iteración de diseño a largo plazo. Las organizaciones pueden estandarizar los diseños y los comportamientos a través de plantillas de temas mientras conservan espacio para los ajustes por página.
Flujos de trabajo de producción
El uso de archivos VTT de lado carriles para subtítulos y capítulos simplifica la publicación continua: los editores envían las pistas de texto actualizadas sin volver a codificar los medios. Un patrón similar se aplica a los miniaturas de vista previa y las imágenes de póster, que se pueden intercambiar de forma independiente de los archivos de video para una rápida iteración de la interfaz de usuario. Estas convenciones se alinean con las prácticas ampliamente adoptadas en las tuberías de entrega de video profesionales.
¿Por qué este enfoque funciona?
Los reproductores basados en estándares y ligeros son más fáciles de depurar, personalizar y ampliar, y se adaptan bien a los flujos de trabajo modernos de CI/CD y sistemas de diseño. Una licencia permisiva, junto con un núcleo compatible con plugins, invita a las contribuciones y las integraciones que benefician tanto a los equipos de producto como a la comunidad más amplia. Con el tiempo, este efecto compuesto del ecosistema produce mejores funciones, documentación y estabilidad para todos.
Disponibilidad
El código del reproductor se publicará como código abierto bajo la Licencia MIT en el repositorio oficial de GitHub, invitando a problemas, solicitudes de extracción y discusiones de desarrolladores e integradores. La simplicidad de la licencia facilita la integración del reproductor en varios proyectos al tiempo que se honra la atribución y se conserva el texto de la licencia. La documentación y los ejemplos acompañarán el lanzamiento para acelerar la adopción y la personalización.
Una nota para los usuarios de MYETV
Este proyecto se basa en años de mejoras iterativas en la reproducción en la plataforma MYETV, incluyendo la personalización de la interfaz de usuario y las extensiones del reproductor que han soportado la marca y las experiencias de visualización en evolución. La apertura del reproductor formaliza este progreso y facilita su adopción, ampliación y mantenimiento en entornos web y de televisión MYETV. Esto es la base para una hoja de ruta sostenible y impulsada por la comunidad para funciones e integraciones en el futuro.
Lista de características
- Reproducción basada en HTML5 con pistas y controles basados en estándares para una amplia compatibilidad con los navegadores.
- Subtítulos con WebVTT, menús multi-pistas y flujos de trabajo de autoría de VTT compatibles con la producción; los flujos de trabajo basados en SRT admitidos por la conversión o las tuberías.
- Capítulos con segmentos etiquetados y vistas previas de miniatura opcionales para la navegación de contenido largo.
- Tematización a través de variables CSS, esquemas de color y elementos de marca como marcas de agua o logotipos de esquinas.
- Controles completos: reproducir/pausar, buscar, tiempo, volumen, silencio, subtítulos, calidad, velocidad, pantalla completa, imagen en imagen.
- Arquitectura de plugin para análisis, publicidad, marcas de agua y botones personalizados sin bifurcar el núcleo.
- Soporte para la transmisión HLS o DASH para la compatibilidad con todos los flujos de audio y vídeo.
- API clara para el control imperativo, los eventos y la inicialización declarativa a través de atributos.
- Versión de código abierto con licencia MIT para fomentar la colaboración y el uso flexible.
Cierre
Liberando el reproductor MYETV bajo la Licencia MIT invita a la comunidad a ayudar a dar forma a una experiencia de reproducción enfocada, rápida y extensible que los equipos puedan confiar en producción. Con subtítulos robustos, capítulos, temas, plugins y una API limpia, está diseñado para ser una base confiable para las aplicaciones web y de televisión de hoy en día.
