sábado 16 noviembre 2024

Cómo utilizar un reproductor de vídeo con Videogular en Angular

Videogular es un framework de código abierto basado en Angular que te permite crear reproductores multimedia de alta calidad. Soporta una amplia gama de funcionalidades como:

Reproducción de video y audio.
Soporte para múltiples formatos.
Extensiones para subtítulos, controles avanzados y más.
Compatibilidad con Angular moderno (a partir de Angular 2).

Su diseño modular facilita la integración en proyectos, permitiendo personalizar la experiencia del usuario con facilidad. 🚀

Instalación de Videogular

Requisitos previos

Antes de comenzar, asegúrate de que tu entorno cumple con lo siguiente:

Node.js (versión 14 o superior).
Angular CLI (versión 12 o superior).
Un proyecto Angular ya inicializado.

Pasos para instalar Videogular

1. Instalar el paquete base:

Ejecuta el siguiente comando en tu terminal para instalar Videogular y sus dependencias básicas:

npm install @videogular/ngx-videogular @videogular/ngx-videogular-controls

2. Configurar en tu módulo Angular:

Abre el archivo app.module.ts y agrega los módulos necesarios:

import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppComponent } from './app.component';

   // Importar los módulos de Videogular
   import { VgCoreModule } from '@videogular/ngx-videogular';
   import { VgControlsModule } from '@videogular/ngx-videogular-controls';

   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       VgCoreModule,
       VgControlsModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

3. Añadir un video al componente:

Crea o edita el archivo app.component.html y utiliza el siguiente código base:

<vg-player>
     <video [vgMedia]="media" #media id="singleVideo" controls>
       <source src="assets/video.mp4" type="video/mp4" />
     </video>
     <vg-controls></vg-controls>
   </vg-player>

Este ejemplo básico carga un video ubicado en la carpeta assets.

Configuración y Personalización

Agregar Subtítulos

Para incluir subtítulos en tu reproductor, utiliza la etiqueta <track> dentro del elemento <video>:

<track src="assets/subtitulos.vtt" kind="subtitles" srclang="es" label="Español" default />

Controles Avanzados

Videogular permite personalizar los controles mediante directivas. Por ejemplo, puedes ocultar botones específicos o añadir nuevos:

<vg-player>
  <video [vgMedia]="media" #media id="customVideo">
    <source src="assets/video.mp4" type="video/mp4" />
  </video>
  <vg-controls>
    <vg-play-pause></vg-play-pause>
    <vg-time-display></vg-time-display>
    <vg-track-selector></vg-track-selector>
  </vg-controls>
</vg-player>

Funcionalidades Adicionales

Soporte para Live Streaming

Videogular admite flujos HLS (HTTP Live Streaming). Para implementarlo, necesitas un plugin adicional como videogular2-hls:

npm install @videogular/ngx-videogular-hls

Luego, en tu código:

<vg-player>
  <video [vgMedia]="media" #media>
    <source src="https://live-stream-url.m3u8" type="application/x-mpegURL" />
  </video>
  <vg-controls></vg-controls>
</vg-player>

Eventos Personalizados

Puedes aprovechar eventos para capturar y manipular acciones del usuario:

import { Component } from '@angular/core';
import { VgApiService } from '@videogular/ngx-videogular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private vgApi: VgApiService) {}

  onPlayerReady(api: VgApiService) {
    console.log('Reproductor listo', api);
    api.play(); // Comienza la reproducción automáticamente
  }
}

Conclusión

Videogular es una herramienta increíblemente flexible que te permite crear reproductores multimedia modernos y funcionales en aplicaciones Angular. Con soporte para múltiples formatos, personalización avanzada y compatibilidad con tecnologías emergentes como HLS, se convierte en una opción ideal para proyectos multimedia.

Etiquetas:

typescript angular

Creado por:

Jorge García

Fullstack developer