Construyendo un reproductor de video angular con Videogular

De acuerdo con las estadísticas de tráfico en línea, el video está tomando el control de la web. La buena vieja televisión se está muriendo y las empresas se están moviendo rápidamente para dominar un mercado que representará el 80 % del tráfico en línea para 2019.

Muchos proveedores y productos de medios confían en la compatibilidad con video HTML5:

• Youtube: plataforma para compartir vídeos y redes sociales HTML5
• Netflix: proveedor de contenido de video HTML5
• JWPlayer: servicio de video HTML5 y proveedor de transmisión
• Brightcove: servicio de video HTML5 y proveedor de transmisión
• Kaltura: proveedor de transmisión y servicio de video HTML5
• Video.js: reproductor de vídeo HTML5
• Flowplayer: reproductor de video HTML5 y proveedor de transmisión

La comunidad de desarrolladores necesita un marco de medios sólido, extensible y avanzado (no solo un reproductor de video HTML5) para enfrentar los nuevos desafíos que se avecinan. En este artículo, quiero presentar uno de esos marcos: Videogular .

¿Qué es Videogular?

Como sugiere el nombre, Videogular es un marco de medios escrito en Angular 2+. Con Videogular, puede reproducir video HTML5, audio o cualquier otro contenido que desee. Existe una implementación para Angular 1.X (también conocido como AngularJS), pero en este artículo solo hablaremos sobre la versión actual de Angular 2+.

Entonces, la siguiente pregunta que probablemente esté cruzando por tu mente es: ¿Por qué usar Angular para video?

Bueno, hay una serie de buenas razones para elegir un marco específico para crear una biblioteca de videos.

• Facilidad de contribución: debido a que Videogular se basa en Angular, un marco popular con una comunidad muy activa, es muy fácil para otras personas comenzar a contribuir creando complementos o corrigiendo errores.
• Componentes web: no es necesario escribir JavaScript para crear y diseñar su propio reproductor. Puede escribir código HTML y CSS.
• TypeScript: Angular es un marco escrito, así como todas las bibliotecas que lo rodean. Tener un ecosistema fuertemente tipado nos permite detectar errores y problemas de arquitectura antes de que sea demasiado tarde.
• Velocidad: todos los marcos populares más recientes son ultrarrápidos, incluido Angular.

Además, tenemos otras características interesantes como RxJS, AOT (compilación anticipada), la CLI angular y más.

¿Cómo funciona Videogular?

Me gusta decir que Videogular es más un marco de medios que solo un reproductor de video HTML5. La característica más relevante y la diferencia entre otros reproductores de video es que usted escribe etiquetas para configurar su reproductor en lugar de JavaScript.

Así es como funcionan la mayoría de los reproductores de video en este momento:

 <video class="library" controls preload="auto" data-config="some-js-object-here"> <source src="video-url.mp4" type='video/mp4'> </video> <script src="video-library.js"></script>

Y así es como se ve la implementación de Videogular:

 <vg-player> <vg-overlay-play></vg-overlay-play> <vg-buffering></vg-buffering> <vg-controls> <vg-play-pause></vg-play-pause> <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display> <vg-scrub-bar> <vg-scrub-bar-current-time></vg-scrub-bar-current-time> <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time> </vg-scrub-bar> <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display> <vg-track-selector></vg-track-selector> <vg-mute></vg-mute> <vg-volume></vg-volume> <vg-fullscreen></vg-fullscreen> </vg-controls> <video #myMedia [vgMedia]="myMedia" preload="auto" crossorigin> <source src="video-url.mp4" type='video/mp4'> <track kind="subtitles" label="English" src="assets/subs/pale-blue-dot.vtt" srclang="en" default> <track kind="subtitles" label="Espanol" src="assets/subs/pale-blue-dot-es.vtt" srclang="es"> </video> </vg-player>

Lo bueno de Videogular es que, con solo un rápido vistazo al código HTML, sabes cómo funciona este reproductor, qué controles tiene disponibles y cómo modificarlo para eliminar, por ejemplo, las pistas y el selector de pistas.

Pero esta no es la única ventaja de la que podemos beneficiarnos a la hora de construir un reproductor de vídeo Angular. Piense en grandes equipos de desarrollo donde los diseñadores de HTML/CSS y los desarrolladores de JavaScript trabajan juntos en la misma base de código. Debido a que usamos elementos personalizados, los diseñadores pueden comenzar a trabajar aplicando estilos y animaciones sin necesidad de aprender una nueva biblioteca o incluso JavaScript/TypeScript.

Además, Videogular brinda capacidades mucho más poderosas que simplemente escribir un reproductor de video Angular simple, como la sincronización automática entre varios archivos multimedia, o la capacidad de reproducir no solo video/audio, sino casi cualquier contenido que tenga un principio y un final.

Para ver lo fácil que es crear una aplicación rica e interactiva con Videogular, vamos a crear una lista de reproducción de video con metadatos sincronizados.

Cómo instalar Videogular

En este ejemplo, tendremos una lista de videos y un extracto relacionado de Wikipedia, en caso de que el usuario necesite más información sobre el video.

Todo el código está disponible en nuestro repositorio Videogular Showroom GitHub y está publicado como una página de GitHub.

La instalación de Videogular debería ser un asunto sencillo para cualquier desarrollador Angular experto. Por otro lado, si recién está comenzando en Angular, debe consultar esta guía rápida para crear su primera aplicación Angular.

Si aún no ha instalado Node.js, vaya al sitio web oficial de Node.js e instálelo. Este es el único servidor que necesitamos para desarrollar con Angular, y lo necesitamos para instalar dependencias a través de NPM. Solo debe asegurarse de instalar Node.js 6.9.0 o superior y NPM 3.0.0 o superior.

Lo primero que debemos hacer es instalar Angular CLI. La CLI de Angular es una herramienta imprescindible para cualquier desarrollador de Angular, ya que proporciona andamios, pruebas, servidores de desarrollo y compilaciones de producción fáciles. Aún más importante, sigue una convención que cualquier otro desarrollador de Angular puede entender.

Instale Angular CLI globalmente a través de NPM:

 npm install -g @angular/cli

Y creemos nuestro primer proyecto con soporte para SASS:

 ng new smart-video-playlist --style=scss

Esto debería crear un proyecto de muestra para usted. Si desea comenzar a desarrollar y ver los resultados al mismo tiempo, puede ejecutar npm run start y abrir [http://localhost:4200](http://localhost:4200) . La CLI de Angular ejecutará un servidor de desarrollo Node.js con recarga en vivo y todas las características geniales que a nosotros, como desarrolladores, nos encantan.

Ahora puede instalar la biblioteca videogular2 y los tipos core-js :

 npm install videogular2 --save npm install @types/core-js --save-dev

Crear un reproductor de video angular

Si lo desea, puede usar la fuente Videogular oficial para establecer iconos en sus botones y controles. Para hacerlo, debe agregar CSS a su archivo .angular-cli.json disponible en la raíz de su proyecto.

 { ... "apps": [ { ... "styles": [ "../node_modules/videogular2/fonts/videogular.css", "styles.scss" ], ... } ], ... }

Si desea configurar su propia fuente y estilos, puede configurar su CSS personalizado aquí o dentro styles.scss .

Para comenzar a usar Videogular en su proyecto, debe agregar el módulo Videogular a su módulo de aplicación.

Abra src/app/app.module.ts y elimine FormsModule y HttpModule; no los necesitaremos para esta demostración. Así debería ser su archivo app.module.ts :

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { VgCoreModule } from 'videogular2/core'; import { VgControlsModule } from 'videogular2/controls'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, VgCoreModule, VgControlsModule ], providers: [], bootstrap: [ AppComponent ] }) export class AppModule { }

Con todo configurado, ¡solo necesitamos escribir nuestro código HTML!

 <vg-player> <vg-controls> <vg-play-pause></vg-play-pause> <vg-playback-button></vg-playback-button> <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display> <vg-scrub-bar> <vg-scrub-bar-current-time></vg-scrub-bar-current-time> <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time> </vg-scrub-bar> <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display> <vg-mute></vg-mute> <vg-volume></vg-volume> <vg-fullscreen></vg-fullscreen> </vg-controls> <video #media [vgMedia]="media" preload="auto" crossorigin> <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4"> </video> </vg-player>

Ahora puede ejecutar el servidor y disfrutar de su primera aplicación de video con tecnología Angular y Videogular.

 npm run start

Creación de una lista de reproducción multimedia en Angular

Para listar nuestros videos, crearemos una matriz simple con todas las opciones. Solo tenga en cuenta que puede cargar esta lista a través de un servicio REST con HttpModule de Angular, pero en aras de la simplicidad, lo haremos de forma codificada en esta demostración.

Abra app.component.ts y agregue esta variedad de videos y su interfaz:

 import { Component } from '@angular/core'; export interface IMedia { title: string; src: string; type: string; } @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: [ './app.component.scss' ] }) export class AppComponent { playlist: Array<IMedia> = [ { title: 'Pale Blue Dot', src: 'http://static.videogular.com/assets/videos/videogular.mp4', type: 'video/mp4' }, { title: 'Big Buck Bunny', src: 'http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov', type: 'video/mp4' }, { title: 'Elephants Dream', src: 'http://static.videogular.com/assets/videos/elephants-dream.mp4', type: 'video/mp4' } ]; }

Ahora estamos listos para agregar la lista de reproducción debajo de nuestro reproductor en el archivo HTML:

 <ul> <li *ngFor="let item of playlist; let $index = index" (click)="onClickPlaylistItem(item, $index)" [class.selected]="item === currentItem"> {{ item.title }} </li> </ul>

Agreguemos algunos estilos para la clase selected y el efecto de hover :

 ul { list-style-type: none; margin: 0; padding: 0; font-family: sans-serif; li { padding: 10px; cursor: pointer; &.selected { background-color: #dddddd; } &:hover { background-color: #cce6ee; } } }

El método onClickPlaylistItem configurará los medios para que se reproduzcan en nuestro reproductor Videogular. Vayamos ahora a app.component.ts para agregar el método:

 // ... export class AppComponent { // ... currentIndex = 0; currentItem: IMedia = this.playlist[ this.currentIndex ]; onClickPlaylistItem(item: IMedia) { this.currentIndex = index; this.currentItem = item; } }

La propiedad currentIndex se usará más adelante para identificar el elemento actual y su posición en la lista de reproducción. Esto es importante para hacer listas de reproducción de bucle infinito y actualizar el currentIndex cuando el usuario hace clic en un elemento de la lista de reproducción.

Finalmente, solo tenemos que modificar el elemento video para establecer la fuente desde la propiedad currentItem que maneja la lista de reproducción. Crearemos para esto un enlace simple a la propiedad src del elemento de video HTML5:

 <video #media [vgMedia]="media" [src]="currentItem.src" preload="auto" crossorigin> </video>

Ahora podemos probar nuestra lista de reproducción y ver cómo funciona. El primer video se carga al principio y podemos cambiar entre videos, ¡así que todo está bien! Pero podemos hacer algunos ajustes y mejorar la experiencia cambiando automáticamente entre videos cuando se completa un video y agregando una mejor administración general del estado del reproductor.

Para hacer esto, necesitaremos la API de Videogular, un servicio global disponible en cada instancia de Videogular para manejar el estado y escuchar eventos.

Uso de VgAPI para manejar estados

Nuestra lista de reproducción de medios ahora es 100% funcional, pero podemos mejorar la experiencia del usuario al reproducir videos automáticamente cuando se selecciona un elemento nuevo o cuando se completa un video.

Videogular expone una API para controlar y escuchar los cambios de cada instancia de VgMedia dentro del componente VgPlayer . En realidad, todos los módulos de Videogular se basan en esta API pública, por lo que puede crear sus propios módulos para sus clientes o contribuir a la comunidad al publicarlos como código abierto.

Para usar la API de Videogular, solo necesita escuchar el evento onPlayerReady por el componente VgPlayer:

 <vg-player (onPlayerReady)="onPlayerReady($event)"> // ...

Cuando se inicializa el reproductor, puede guardar la API y comenzar a escuchar los eventos enviados por la etiqueta de video :

 export class AppComponent { // ... onPlayerReady(api: VgAPI) { this.api = api; } }

La API de Videogular se basa en RxJS, por lo que puede subscribe a Observables y reaccionar en consecuencia. Para reproducir automáticamente los videos, debemos escuchar el evento de loadedmetadata .

Agreguemos una nueva Subscription para reproducir el video cuando se carguen los metadatos:

 export class AppComponent { // ... onPlayerReady(api: VgAPI) { this.api = api; this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe( this.playVideo.bind(this) ); } playVideo() { this.api.play(); } // ... }

Eso fue fácil; simplemente reproducimos el video a través de loadedMetadata cuando se activa el observable de metadatos cargados.

¿Recuerdas la propiedad currentIndex ? Ahora es el momento de usarlo para que podamos pasar al siguiente video cuando se complete el video actual:

 // ... export class AppComponent { // ... onPlayerReady(api: VgAPI) { this.api = api; this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe( this.playVideo.bind(this) ); this.api.getDefaultMedia().subscriptions.ended.subscribe( this.nextVideo.bind(this) ); } nextVideo() { this.currentIndex++; if (this.currentIndex === this.playlist.length) { this.currentIndex = 0; } this.currentItem = this.playlist[ this.currentIndex ]; } // ... }

Con este método, podemos controlar cuándo la etiqueta de video activa el evento ended y luego pasar al siguiente video. También agregamos un pequeño control para hacer un bucle infinito cuando lleguemos al final de la lista de reproducción configurando currentIndex = 0; para que podamos volver al primer elemento. Finalmente, configuramos el currentItem que actualizará nuestros enlaces angulares en la interfaz de usuario.

Como puede ver, no estamos reproduciendo el video aquí; eso se debe a que manejamos eso con el observable loadedMetadata . Cuando actualizamos el elemento actual dentro de currentItem nextVideo() , se carga un nuevo video y eso activa el observable de los loadedMetadata .

¡Esto hace que nuestro código sea más fácil de leer y más difícil de descifrar! Los observables son increíbles, ¿verdad?

¿Que sigue?

Desde aquí, podríamos agregar algunos controles de video HTML5 para eliminar la reproducción automática o el bucle infinito, inyectar anuncios o sincronizar información.

En esta demostración, solo arañamos la superficie de lo que se puede hacer con Videogular. La API es capaz de administrar varios archivos multimedia al mismo tiempo, tenemos módulos para transmisión y publicidad, e incluso puede crear un reproductor multimedia para reproducir animaciones, rutas en un mapa y mucho más.

Videogular se publica bajo una licencia MIT y es un proyecto de código abierto disponible en GitHub. Todos son bienvenidos a crear una solicitud de extracción, enviar un problema, escribir documentación y contribuir a la comunidad.