Presentación del MYETV jugador
El MYETV El reproductor de vídeo es una experiencia multimedia moderna, HTML5-primer diseñada para la puesta en marcha rápida, la interfaz de usuario limpia y la personalización profunda en las superficies web y TV, continuando la larga evolución de la plataforma desde jugadores HTML5 anteriores a una herramienta totalmente abierta y extensible. Construido en tecnologías web estándar, abarca leyendas, capítulos, temas, plugins y una API de JavaScript documentada para que los equipos puedan integrar, marcar y ampliar la reproducción de forma fiable en todos los dispositivos. La base de código será publicada como fuente abierta bajo la Licencia MIT en el repositorio oficial GitHub para fomentar la revisión comunitaria, las contribuciones y la reutilización.
Enlace Github: https://github.com/OskarCosimo/MYETV-video-player-opensource/
Enlace de demostración: https://oskarcosimo.com/MYETV-video-player/MYETV-player-demo.html
MIT Licencia de un vistazo
La licencia MIT es una licencia de código abierto corta y permisiva que permite el uso, copia, modificación, distribución, sublicencia y uso comercial, siempre y cuando se mantenga el aviso original de copyright y licencia. El software- [Program/Software: the instructions that control what a computer does; computer programs] - se proporciona “como es”, sin garantías o responsabilidad, que mantiene el cumplimiento claro y ligero tanto para desarrolladores individuales como para empresas. Esta combinación de flexibilidad y sencillez es una razón clave para el MIT sigue siendo una de las licencias más populares para proyectos de código abierto.
Por qué fuente abierta
Open sourcing el reproductor bajo MIT permite un desarrollo transparente, reduce el riesgo de bloqueo de proveedores y permite mejoras impulsadas por la comunidad, incluyendo plugins e integraciones inspirados en ecosistemas vibrantes vistos en reproductores HTML5 de uso amplio. Las licencias permisivas hacen que sea fácil incrustar al reproductor dentro de las pilas comerciales o de código cerrado, mientras que todavía contribuyen a recuperar las correcciones de errores o mejoras según se desee. Este enfoque se ajusta a MYETV’s historia de la reproducción evolutiva y capacidades de interfaz de usuario para entornos diversos.
Arquitectura básica
El reproductor se centra en los medios HTML5 y las API web estándar, proporcionando amplia compatibilidad y despliegue directo en los navegadores modernos y las vistas web. Gracias a las pistas y controles basados en estándares, soporta capciones, capítulos y mejoras de la interfaz de usuario sin dependencias de tiempo de ejecución patentadas. El resultado es comportamiento predecible, extensibilidad y una base estable para características personalizadas y ajuste de rendimiento.
Opciones de JavaScript
- Iniciación de Playback: fuente URL(s), autoplay, preload, loop, muted, playsinline, logotipos de marca, logotipos de marca de agua y póster propiedad HTML5 familiar para una configuración predecible.
- Configuración UX: opciones para la visibilidad de la barra de control, el diseño de botones, el comportamiento del teclado, los timeouts de inactividad y las herramientas proporcionan un control fino de los patrones de interacción.
- Manipulación de medios: selección de calidad, menús de reproducción y menús de pista (audio/caption) siguen las mejores prácticas observadas en jugadores y kits de herramientas establecidos.
- Callbacks del evento: onReady, onPlay, onPause, onEnded, onError, onRateChange, onQuality Cambio, onCaptionChange permite la orquestación de nivel de aplicación y ganchos de análisis.
SCSS y CSS
Las variables temáticas y los ganchos de clase CSS permiten colores personalizados, tipografía, espaciamiento, radios de esquina e iconografía, permitiendo una alineación perfecta con los sistemas de marca de productos. Múltiples pieles se soportan a través de hojas de estilo ligero para que una sola construcción pueda presentar diferentes looks a través de propiedades o inquilinos. Los elementos de marca como un pequeño logotipo de esquina o marca de agua se pueden aplicar a través de opciones o superposiciones CSS.
Logos totalmente personalizables
El jugador cuenta con logos de marca totalmente personalizable y marcas de agua.
Logo Marca: Situado a la derecha de la barra de control, se puede mostrar 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.
Logo Watermark: posicionado como se desea en el vídeo, se puede configurar con una URL de imagen (tamaño recomendado: ancho: 180px, altura: 100px), un enlace, una capa de enlace, y hay una opción para establecer su posición (a la izquierda, superior derecha, inferior izquierda, inferior derecha).
Los logotipos son opcionales, tienen un amplio soporte API y ya se insertan como una opción cuando el jugador inicializa, por lo que no se requiere plugin.
Capciones: VTT y SRT
El reproductor admite pistas de texto con WebVTT para capciones y subtítulos, incluyendo menús multilingües y estilo, aprovechando el modelo de pista estándar utilizado en toda la web. Los archivos WebVTT son fáciles de escribir y mantener, y son bien adaptados para ambas capas y capítulos, haciéndolos un ajuste natural para tuberías de producción. Los flujos de trabajo que se originan en SRT pueden adaptarse mediante la conversión a VTT o mediante procesos ingerentes que producen ambos formatos para la máxima compatibilidad.
Capítulos con imágenes
Los capítulos están habilitados a través de las pistas del capítulo WebVTT, permitiendo la navegación rápida a través de contenidos de largo formato con segmentos claros y etiquetados. El jugador puede mostrar vistas visuales y miniaturas de imagen junto con entradas de capítulo para hacer la navegación más intuitiva y atractiva para el público. Este enfoque simplifica la edición de contenidos: los productores actualizan un VTT lateral e imágenes, y el capítulo UI se actualiza automáticamente.
Botones de barra de control
- Playback: play/pause, seek, replay y pantallas de tiempo están presentes con atajos de teclado para una navegación eficiente.
- Audio: mute/unmute y slider de volumen garantizan un control de sonido consistente, con menús opcionales de audio-track cuando están presentes múltiples pistas.
- Vista: pantalla completa y imagen-en-imagen integrar con las capacidades del navegador, y los modos opcionales de teatro o ajuste ayudan a satisfacer las necesidades de diseño.
- Calidad y velocidad: menús de bitrate/calidad y selección de tipos de reproducción proporcionan a la agencia de usuarios las preferencias de red y comprensión.
- Capciones: un menú de subtítulos proporciona toggles on/off y selección de pistas, con estilo alineado a la orientación de accesibilidad.
- Desbordamiento: un menú personalizable “más” alberga configuraciones avanzadas y acciones impulsadas por plugins para mantener la interfaz de usuario enfocada.
Reproductor de audio con visualización de ondas
El reproductor también puede ser utilizado como reproductor de audio solamente y tiene un sistema de visualización integrado de ondas de audio sin la necesidad de ningún plugin; el sistema todavía se puede personalizar mediante la creación de plugins separados. Se establecen dos opciones cuando el reproductor es inicializado: “audiofile” (verdadero o falso) configurará al reproductor como reproductor de audio, mientras que “audiowave” (verdad o falso) mostrará la forma de onda de audio en el espacio de vídeo.
Sistema de enchufe
La arquitectura plugin expone ganchos de ciclo de vida, puntos de inyección de la interfaz de usuario y suscripciones de eventos para que nuevas características puedan ser agregadas sin núcleo de forking. Ejemplos incluyen balizas analíticas, integraciones de anuncios a través de SDKs estandarizados, sobrecapas de observación de agua y botones personalizados para acciones específicas de dominio. Esto refleja ecosistemas abiertos exitosos donde los paquetes comunitarios expanden las capacidades de los jugadores con el tiempo.
Developer API
Una API concisa permite el juego de control imperativo, pausa, buscar, configurarVolume, setMuted, setPlaybackRate, setSource(s), setTrack(s), y obtener State más promesas listos/error para el arranque suave. Los emisores de eventos espejo semántica HTML5 para que el código de aplicación pueda reaccionar a cambios de cabeza de juego, amortiguación, errores, toggles de pista, conmutadores de calidad y transiciones de pantalla completa. La configuración puede ser suministrada a través de JavaScript o atributos de datos, permitiendo tanto patrones declarativos como program- [Program/Software: the instructions that control what a computer does; computer programs] - áticos de inicialización.
Características de accesibilidad
Los subtítulos WebVTT y las pistas de capítulo mejoran la accesibilidad y la comprensión al tiempo que permiten la navegación de teclado a través de la interfaz de usuario. Estados de enfoque claros, contraste legible y soporte ajustable para el estilo de la capción experiencias inclusivas por defecto. El soporte multilingüe sigue metadatos de pista y se alinea con las prácticas utilizadas por los jugadores de escritorio y TV establecidos.
Theming y branding a escala
Las variables globales CSS permiten intercambios rápidos de color y tipografía para que las marcas puedan mantener una identidad consistente entre los jugadores incrustados en múltiples sitios o aplicaciones. Los patrones de habilidad proporcionan una mayor separación entre lógica y estilo, simplificando el mantenimiento y la iteración de diseño a largo plazo. Las organizaciones pueden estandarizar diseños y comportamientos a través de presets temáticos mientras preservan espacio para sobresueldos por página.
Flujos de trabajo de producción
Utilizar archivos VTT de sidecar para capciones y capítulos simplifica la publicación continua: editores envían pistas de texto actualizadas sin recodificar medios. Un patrón similar se aplica a las miniaturas de vista previa e imágenes de póster, que se pueden cambiar independientemente de archivos de vídeo para la iteración rápida de la interfaz de usuario. Estas convenciones se ajustan a las prácticas ampliamente adoptadas en los sistemas de distribución de vídeo profesionales.
Por qué funciona este enfoque
Los jugadores magros, basados en estándares son más fáciles de depurar, temático y extender, y encajan bien con los flujos de trabajo modernos CI/CD y del sistema de diseño. Una licencia permisiva más un núcleo amigable con plugin invita contribuciones e integraciones que benefician tanto a los equipos de productos como a la comunidad en general. Con el tiempo, este efecto compuesto del ecosistema produce mejores características, docs y estabilidad para todos.
Disponibilidad
El código de reproductor se publicará como fuente abierta bajo la Licencia MIT en el repositorio GitHub oficial, invitando a los problemas, sacando solicitudes y discusiones de desarrolladores e integradores. La sencillez de la licencia hace que sea sencillo incrustar al jugador a través de proyectos mientras honra la atribución y preserva el texto de la licencia. Documentación y ejemplos acompañarán la liberación para acelerar la adopción y la personalización.
Una nota para MYETV usuarios
Este proyecto se basa en años de mejoras iterativas para la reproducción en MYETV plataforma, incluyendo personalización de la interfaz de usuario y extensiones de reproductor que han soportado branding y experiencias de visualización en evolución. Open sourcing el reproductor formaliza ese progreso y hace más fácil adoptar, ampliar y mantener a través de los entornos web y TV MYETV sirve. Esta es la base de una hoja de ruta sostenible impulsada por la comunidad para las características e integraciones que avanzan.
Lista de verificación de precios
- reproducción HTML5-primera con pistas y controles basados en estándares para la compatibilidad amplia del navegador.
- Captioning with WebVTT, multi-track menus, and production-friendly VTT authoring flows; SRT-origin workflows supported by conversion or pipelines.
- Capítulos con segmentos etiquetados y previsualizaciones opcionales de miniatura para la navegación de forma larga.
- Diseño a través de variables CSS, pieles y elementos de marca como marcas de agua o logotipos de esquina.
- Controles integrales: play/pause, seek, time, volume, mute, captions, quality, speed, fullscreen, picture-in-picture.
- Arquitectura de plugin para análisis, anuncios, marcas de agua y botones personalizados sin forjar el núcleo.
- Soporta HLS o DASH streaming para compatibilidad con todas las secuencias de audio/vídeo
- API clara para el control imperativo, eventos e inicialización declarativa a través de atributos.
- MIT-licenciad open-source release to encourage collaboration and flexible reuse.
Clausura
Liberando a los MYETV reproductor bajo la licencia MIT invita a la comunidad a ayudar a configurar una experiencia de reproducción centrada, rápida y extensible que los equipos pueden confiar en la producción. Con tapas robustas, capítulos, temáticas, plugins y una API limpia, está diseñado para ser una base confiable para las aplicaciones web y TV de hoy.
