Las bibliotecas de reproductores de vídeo JS y HTML5 de código abierto son una opción popular para los desarrolladores que buscan agregar funcionalidad de reproducción de vídeo a sus aplicaciones web. Estas bibliotecas proporcionan una solución personalizable y flexible que se puede integrar fácilmente en una variedad de proyectos.

En esta publicación, exploraremos la mejor alternativa de código abierto que los desarrolladores pueden descargar, instalar y usar en sus aplicaciones.

1- reproductor de rx

RxPlayer es un reproductor de JavaScript de código abierto con soporte completo para DASH/Smooth HTML5. Está escrito en TypeScript y puede funcionar sin problemas con React, Vue, Angular y Svelte.

Sus principales objetivos son:

Estabilidad: El RxPlayer puede reproducir contenidos DASH y Smooth en vivo y On Demand durante períodos de tiempo prolongados, con o sin DRM, sin ningún problema de rendimiento, memoria o lógica.

Si encuentra un nuevo problema mientras lo usa, estaremos encantados de ayudarle a solucionarlo. Cualquier error encontrado tiene alta prioridad.

Calidad de experiencia: Su objetivo es jugar con la mejor calidad posible sin ningún rechazo.

Los códecs no compatibles y las calidades indescifrables (por ejemplo, calidades superiores con condiciones DRM más drásticas en dispositivos que no son de confianza) se filtran automáticamente, incluso si esto sucede durante la reproducción.

El reproductor también es muy resistente: cualquier problema temporal de la red, caída del ancho de banda, contenido mal empaquetado o peculiaridad de la plataforma deben manejarse adecuadamente con el objetivo principal de evitar la interrupción de la reproducción.

Portabilidad: El RxPlayer ha sido portado a muchos dispositivos, algunos en el extremo inferior de rendimiento y capacidades de memoria y otros en el extremo superior.

Como tal, puede adaptarse a importantes limitaciones de memoria y rendimiento y al mismo tiempo conservar sus numerosas funciones.

Configurabilidad: RxPlayer tiene una gran cantidad de opciones que le permiten modificar su comportamiento. Debería poder reproducir cualquier contenido de la forma que desee, en cualquier dispositivo.

También debería poder integrar lógica complementaria compleja como soluciones Peer-to-Peer.

Fácil de usar: Nos esforzamos para que este reproductor sea fácil de integrar y usar en varias bases de código.

2- Vídeo.js

Vídeo.js es un reproductor de vídeo web creado desde cero para un mundo HTML5. Admite vídeo HTML5 y extensiones de fuente multimedia, así como otras tecnologías de reproducción como YouTube y Vimeo (a través de complementos). Admite la reproducción de video en computadoras de escritorio y dispositivos móviles. Este proyecto se inició a mediados de 2010 y el reproductor se utiliza ahora en más de 700.000 sitios web.

Video.js se publica bajo la licencia Apache 2.0.

3- reproductor de videojs

Este biblioteca ofrece una funcionalidad fluida de reproductor de video para Vue3 y React. Es un proyecto de código abierto que se publica bajo la licencia MIT.

4- rajeo

Este es un reproductor de video moderno, de código abierto y con reconocimiento de temas para videos HTML.

Sus características incluyen:

• Moderno
• Hermoso
• Progreso de carga (progreso del búfer)
• Modo PiP (imagen en imagen)
• Pantalla completa
• Barra de título superior con icono
• Tema consciente
• Multiplataforma
• Compatible con dispositivos móviles
• Sensible
• Cero dependencias
• Primer enfoque CSS

5- Plyr

Plyr es un reproductor multimedia HTML5, YouTube y Vimeo sencillo, ligero, accesible y personalizable que admite navegadores modernos.

Características de Plyr:

• Vídeo y audio HTML, YouTube y Vimeo – soporte para los formatos principales
• Accesible – soporte completo para subtítulos VTT y lectores de pantalla
• Personalizable – haz que el reproductor se vea como quieres con el marcado que deseas
• HTML limpio – utiliza los elementos correctos. <input type="range"> para volumen y <progress> por el progreso y el bien, <button>s para botones. No hay <span> o <a href="#"> trucos de botones
• Sensible – funciona con cualquier tamaño de pantalla
• Monetización – ganar dinero con tus videos
• Transmisión – soporte para reproducción de streaming hls.js, Shaka y dash.js
• API – alternar reproducción, volumen, búsqueda y más a través de una API estandarizada
• Eventos – sin complicaciones con las API de Vimeo y YouTube, todos los eventos están estandarizados en todos los formatos
• Pantalla completa – admite pantalla completa nativa con respaldo a modos de “ventana completa”
• Atajos – admite atajos de teclado
• Imagen en imagen – admite el modo imagen en imagen
• Juega en línea – apoya el playsinline atributo
• controles de velocidad – ajustar la velocidad sobre la marcha
• Múltiples subtítulos – soporte para múltiples pistas de subtítulos
• soporte i18n – apoyo a la internacionalización de los controles
• Vista previa de miniaturas – soporte para mostrar miniaturas de vista previa
• Sin marcos – escrito en JavaScript ES6 “vainilla”, no se requiere jQuery
• Hablar con descaro a – para incluir en sus procesos de construcción

6- Soppler

Soppler es un reproductor de vídeo HTML5 elegante y rico en funciones que mejora la experiencia visual de los vídeos en páginas web. Ofrece compatibilidad entre dispositivos y navegadores, y admite varios formatos de vídeo. Con controles intuitivos y opciones personalizables, Sopplayer proporciona una experiencia de reproducción fluida y cautivadora para los espectadores.

7- Reproductor de vídeo HTML5 sencillo (Vue2)

Un sencillo reproductor de vídeo html5 para dispositivos móviles basado en vue2.

8- polla

ckin es un código abierto ligero Reproductor de video HTML5 usando JavaScript (sin jQuery).

9- Reproductor de transmisión multimedia JS

Transmisión de medios Player es un reproductor de vídeo para cámaras Axis basado en React. La idea principal es definir el estado del video completamente dentro de componentes especializados de React para cada uno de los diferentes formatos admitidos (actualmente MP4 sobre HTTP, RTP sobre WebSocket e imágenes fijas). El reproductor de video principal solo manejará el estado y formato del video deseado (adjunto a los controladores). El reproductor está construido sobre la biblioteca Media Stream, que proporciona una funcionalidad de reproducción básica para los diferentes formatos.

Puede importar Player o BasicPlayer y usarlos directamente (consulte las aplicaciones de ejem
plo). Si desea crear su propio reproductor personalizado, puede mirar el último componente y crear su propio reproductor utilizando los componentes Contenedor, Capa y Área de reproducción.

10- HLS.js

HLS.js es una biblioteca de JavaScript que implementa un cliente HTTP Live Streaming. Se basa en vídeo HTML5 y extensiones MediaSource para su reproducción.

Funciona transmutando MPEG-2 Transport Stream y AAC/MP3 en fragmentos ISO BMFF (MP4). La transmutación se realiza de forma asincrónica utilizando un Web Worker cuando está disponible en el navegador. HLS.js también es compatible con HLS + fmp4, como se anunció durante la WWDC2016.

HLS.js funciona directamente sobre un elemento HTML estándar.

HLS.js está escrito en ECMAScript6 (.js) y TypeScript (.ts) (superconjunto fuertemente tipado de ES6) y transpilado en ECMAScript5 usando Babel y el compilador TypeScript.

Características

• VOD y listas de reproducción en vivo
• Contenedor MP4 fragmentado
• Contenedor CAA
• Contenedor MPEG-2 TS
• Contenedor AAC (transmisiones solo de audio)
• Metadatos cronometrados para transmisión en vivo HTTP (formato ID3 en MPEG-2 TS, Emsg en CMAF/MP4 fragmentado y etiquetas de lista de reproducción DATERANGE)
• Descifrado AES-128
• Capacidad de buscar en el buffer y en el back buffer sin volver a descargar segmentos
• Análisis incorporado
• Resiliencia a los errores
• Etiquetas HLS compatibles

11- Reproductor.js

Reproductor.js es una biblioteca de JavaScript de código abierto para interactuar con iframes que admiten la especificación Player.js. Le permite controlar el vídeo y el audio integrados en varios proveedores. Ofrece 3 adaptadores de reproductor diferentes.

Admite subtítulos, visualización del progreso del video, desplazamiento, reanudación del video, control de música y caja de resonancia.

12-yo

yo es un reproductor de

• Pieles
• Barra de progreso
• barra de carga
• flotador de tiempo
• Pantalla completa
• Retroceder
• Controles de teclado
• Controles de ocultación automática
• jQuery requerido
• Compatibilidad con navegadores móviles y de escritorio.

13- Jugador MKH. (jQuery)

HTML5 Complemento jQuery para reproductor de audio y vídeo.

14- Maestro Web Player

Reproductor web JavaScript conectable – versión v5.2.3.

Este es el maestro centro. Se requirieron complementos adicionales para configurarlo. Esta guía lo ayudará a comenzar y reproducir un video MP4 simple.

15- Ver.js (Vue)

Componente de reproductor de vídeo HTML5 de una sola página para Vue.js

16- OPjugador

Otro JS más Reproductor de vídeo HTML5. Admite varios formatos de transmisión como HLS, MPED DASH, FLV y WebTorrent.

Sus características incluyen:

• Danmaku
• Captura de pantalla
• Teclas de acceso rápido
• Miniaturas (espíritu o vtt)
• Subtítulos (formatos: SRT, WEBVTT con soporte para etiquetas HTML; subtítulos de HLS; múltiples subtítulos para video)
• Marcador resaltado
• Lista de reproducción

17- Chimee

chime es un reproductor de vídeo web creado por el equipo Qiwoo. Se basa en el elemento de vídeo web. Admite múltiples transmisiones multimedia, incluidas mp4, m3u8, flv, etc.

18- jugador de reacción griffith

Griffith es un reproductor de vídeo web de código abierto basado en reacciones. Sus características incluyen:

• Transmisión: Griffith facilita la transmisión. Ya sea que su formato de video sea mp4 o hls, Griffith puede usar Media Source Extension (MSE) para cargar segmentos.
• Extensibilidad: Griffith simplifica la compatibilidad con funciones de vídeo en las aplicaciones React. También soporta los patrones UMD (Universal Module Definición) para uso directo en el navegador si tu aplicación no está basada en React.
• Fiabilidad: Griffith se ha utilizado ampliamente en la web y la web móvil de Zhihu.

19- Aplaudir

aplaudir es un reproductor multimedia extensible para la web. Su arquitectura se proyecta principalmente en complementos, agregando bajo acoplamiento por diseño al proyecto y la posibilidad de agregar infinitas funciones fácilmente.

Usos de Clappr HTMLVideoElemento de forma predeterminada, lo que garantiza soporte para muchas plataformas. Tiene la posibilidad de ampliar la reproducción HTML5 predeterminada o la interfaz de reproducción para crear un nuevo soporte multimedia, ¡como si fuera un complemento!

20-xgjugador

xgjugador es una biblioteca de reproductores de vídeo web. Ha diseñado un componente de interfaz de usuario separado y desmontable basado en el principio de que todo está componenteizado. Más importante aún, no solo es flexible en la capa de interfaz de usuario, sino también audaz en su funcionalidad: elimina la carga de video, el almacenamiento en búfer y la compatibilidad con formatos para la dependencia del video.

Especialmente en mp4, se puede realizar una carga por etapas para aquellos que no admiten la transmisión de mp4.

Esto significa una conmutación perfecta con claridad, control de carga y ahorro de vídeo. También integra soporte en vivo y bajo demanda para FLV, HLS y Dash.

21- Reproductor de elementos multimedia

HTML5 Reproductor de

22- Zoótropo

El HTML5 Reproductor multimedia que puedes entender.

(Esto todavía está en desarrollo y casi, pero no del todo, listo para su lanzamiento estable).

23- ws.cinema

Reproductor de video sincronizado en línea / aplicación de chat crudamente pirateada para divertirse.

Características incluidas:

• reproducción de vídeo sincronizada para clientes conectados
• admite salas y clientes ilimitados
• admite videos alojados de forma remota, enlaces magnéticos de webtorrent, videos de youtube
• UI en modo cine y fondos intercambiables
• chat en tiempo real con funciones multimedia
• admite gifs / pegatinas
• instantáneas de imágenes del vídeo
• im
  agen pegada del portapapeles
• Comandos vía chat para controlar la interfaz y la reproducción/volumen.

24- Jugador kármico

Karmic Player es una implementación del reproductor integrado nativo de YouTube HTML5 excepcionalmente receptivo y compatible.

25- Reproductor de cine HTML5

Reproductor HTML5 con CSS y java para usuarios con internet de baja calidad.

26- Reproductor de vídeo HTML5

Reproductor de vídeo HTML5 responsivo escrito en HTML, CSS y JavaScript puros.

Características destacadas:

• Cumple con el requisito inicial de interacción del usuario.
• Sensible
• Alternar reproducir/pausar
• Control deslizante de volumen, alternar silencio
• Visualización de hora y duración actuales
• Buscar control deslizante
• Íconos que usan una fuente web (FontAwesome)
• Disparadores de teclado

27- Valiente

Brave es un editor de audio/vídeo básico en tiempo real (remoto). Permite recibir, manipular y enviar vídeo (y/o audio) EN VIVO a otro lugar. Está impulsado por API y está diseñado para funcionar de forma remota, como en la nube.

El uso de ejemplo incluye:

• Reenviar RTMP de un lugar a otro
• Cambiar el tamaño del vídeo y tener una pizarra de retención si la entrada desaparece
• Mezclar dos o más entradas
• Agregar gráficos básicos (imágenes, texto, etc.)
• Vista previa de transmisiones de video usando WebRTC

Valiente está basado en GStreamer. Es, en cierto sentido, una API RESTful para GStreamer (para manejo de audio/video en vivo).

Etiquetas

JavaScript html html5 Herramientas para desarrolladores Biblioteca Lista de marcos Código abierto Basado en la web TypeScript autohospedado