Costruire un riproduttore video angolare con Videogular

Secondo le statistiche sul traffico online, il video sta prendendo il controllo del web. La buona vecchia TV sta morendo e le aziende si stanno muovendo velocemente per dominare un mercato che rappresenterà l'80% del traffico online entro il 2019.

Molti fornitori di contenuti multimediali e prodotti si affidano al supporto video HTML5:

• Youtube: piattaforma di condivisione social e video HTML5
• Netflix: fornitore di contenuti video HTML5
• JWPlayer: servizio video HTML5 e provider di streaming
• Brightcove: servizio video HTML5 e provider di streaming
• Kaltura: servizio video HTML5 e provider di streaming
• Video.js: lettore video HTML5
• Flowplayer: lettore video HTML5 e provider di streaming

La comunità degli sviluppatori ha bisogno di un framework multimediale solido, estensibile e avanzato (non solo un lettore video HTML5) per affrontare le nuove sfide che si prospettano. In questo articolo, voglio introdurre uno di questi framework: Videogular .

Cos'è il videogular?

Come suggerisce il nome, Videogular è un framework multimediale scritto in Angular 2+. Con Videogular, puoi riprodurre video, audio o qualsiasi altro contenuto HTML5 che desideri. Esiste un'implementazione per Angular 1.X (aka AngularJS), ma in questo articolo parleremo solo dell'attuale versione di Angular 2+.

Quindi, la prossima domanda che probabilmente ti passa per la mente è: perché usare Angular per i video?

Bene, ci sono una serie di buoni motivi per scegliere un framework specifico per creare una libreria video.

• Facilità di contributo: poiché Videogular si basa su Angular, un framework popolare con una comunità molto attiva, è molto facile per altre persone iniziare a contribuire creando plugin o correggendo bug.
• Componenti Web: non è necessario scrivere JavaScript per creare e definire lo stile del tuo lettore. Puoi scrivere codice HTML e CSS.
• TypeScript: Angular è un framework tipizzato, così come tutte le librerie che lo circondano. Avere un ecosistema fortemente tipizzato ci consente di rilevare bug e problemi di architettura prima che sia troppo tardi.
• Velocità: tutti gli ultimi framework popolari sono velocissimi, incluso Angular.

Inoltre, abbiamo alcune altre fantastiche funzionalità come RxJS, AOT (compilazione anticipata), Angular CLI e altro.

Come funziona Videogular?

Mi piace dire che Videogular è più un framework multimediale che un semplice lettore video HTML5. La caratteristica più rilevante e la differenza tra gli altri video player è che scrivi tag per impostare il tuo player invece di JavaScript.

Ecco come funziona la maggior parte dei lettori video in questo 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>

Ed ecco come appare l'implementazione di 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>

La cosa buona di Videogular è che, con una rapida occhiata al codice HTML, sai come funziona questo player, quali controlli sono disponibili e come modificarlo per rimuovere, ad esempio, le tracce e il selettore delle tracce.

Ma questo non è l'unico vantaggio di cui possiamo beneficiare quando costruiamo un video player Angular. Pensa ai grandi team di sviluppo in cui i progettisti HTML/CSS e gli sviluppatori JavaScript lavorano insieme sulla stessa base di codice. Poiché utilizziamo elementi personalizzati, i progettisti possono iniziare a lavorare applicando stili e animazioni senza la necessità di apprendere una nuova libreria o persino JavaScript/TypeScript.

Inoltre, Videogular offre funzionalità molto più potenti rispetto alla semplice scrittura di un semplice lettore video Angular, come la sincronizzazione automatica tra diversi file multimediali o la possibilità di riprodurre non solo video/audio, ma praticamente qualsiasi contenuto che abbia un inizio e una fine.

Per vedere com'è facile creare un'app ricca e interattiva con Videogular, creeremo una playlist video con metadati sincronizzati.

Come installare Videogular

In questo esempio, avremo un elenco di video e un relativo estratto da Wikipedia, nel caso in cui l'utente abbia bisogno di maggiori informazioni sul video.

Tutto il codice è disponibile nel nostro repository GitHub Videogular Showroom ed è pubblicato come pagina GitHub.

L'installazione di Videogular dovrebbe essere un affare semplice per qualsiasi sviluppatore Angular esperto. D'altra parte, se hai appena iniziato ad usare Angular, dovresti dare un'occhiata a questa guida rapida per creare la tua prima app Angular.

Se non hai ancora installato Node.js, vai al sito Web ufficiale di Node.js e installalo. Questo è l'unico server che dobbiamo sviluppare con Angular e ci serve per installare le dipendenze tramite NPM. Devi solo assicurarti di installare Node.js 6.9.0 o versioni successive e NPM 3.0.0 o versioni successive.

La prima cosa che dobbiamo fare è installare Angular CLI. Angular CLI è uno strumento indispensabile per qualsiasi sviluppatore Angular, poiché fornisce semplici strutture di scaffolding, test, server di sviluppo e build di produzione. Ancora più importante, segue una convenzione che qualsiasi altro sviluppatore Angular può comprendere.

Installa Angular CLI a livello globale tramite NPM:

 npm install -g @angular/cli

E creiamo il nostro primo progetto con il supporto di SASS:

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

Questo dovrebbe creare un progetto di esempio per te. Se desideri iniziare a sviluppare e guardare i risultati contemporaneamente, puoi eseguire npm run start e aprire [http://localhost:4200](http://localhost:4200) . Angular CLI eseguirà un server di sviluppo Node.js con ricarica in tempo reale e tutte le fantastiche funzionalità che noi sviluppatori amiamo.

Ora puoi installare la libreria videogular2 e le digitazioni core-js :

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

Creazione di un riproduttore video angolare

Se lo desideri, puoi utilizzare il font Videogular ufficiale per impostare icone sui pulsanti e sui controlli. Per fare ciò devi aggiungere CSS al tuo file .angular-cli.json disponibile nella radice del tuo progetto.

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

Se vuoi impostare il tuo carattere e i tuoi stili, puoi impostare il tuo CSS personalizzato qui o all'interno styles.scss .

Per iniziare a utilizzare Videogular nel tuo progetto, devi aggiungere il modulo Videogular al modulo dell'applicazione.

Apri src/app/app.module.ts e rimuovi FormsModule e HttpModule; non avremo bisogno di loro per questa demo. Ecco come dovrebbe piacere il tuo file 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 tutto pronto, dobbiamo solo scrivere il nostro codice 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>

Ora puoi eseguire il server e goderti la tua prima app video basata su Angular e Videogular.

 npm run start

Costruire una playlist multimediale in Angular

Per elencare i nostri video, creeremo un semplice array con tutte le opzioni. Tieni presente che puoi caricare questo elenco tramite un servizio REST con HttpModule di Angular, ma per semplicità, lo faremo hardcoded in questa demo.

Apri app.component.ts e aggiungi questa serie di video e la sua interfaccia:

 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' } ]; }

Ora siamo pronti per aggiungere la playlist sotto il nostro lettore nel file HTML:

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

Aggiungiamo alcuni stili per la classe selected e l'effetto al passaggio del 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; } } }

Il metodo onClickPlaylistItem imposterà il file multimediale da riprodurre sul nostro lettore Videogular. Andiamo ora su app.component.ts per aggiungere il metodo:

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

La proprietà currentIndex verrà utilizzata in seguito per identificare l'elemento corrente e la sua posizione nella playlist. Questo è importante per creare playlist a ciclo infinito e aggiornare l' currentIndex quando l'utente fa clic su un elemento della playlist.

Infine, dobbiamo solo modificare l'elemento video per impostare la sorgente dalla proprietà currentItem gestita dalla playlist. Creeremo per questo un semplice collegamento alla proprietà src dell'elemento video HTML5:

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

Ora possiamo testare la nostra playlist e vedere come funziona. Il primo video viene caricato all'inizio e possiamo passare da un video all'altro, quindi va tutto bene! Ma possiamo apportare alcune modifiche e migliorare l'esperienza passando automaticamente da un video all'altro al completamento di un video e aggiungendo una migliore gestione complessiva dello stato del lettore.

Per fare ciò avremo bisogno dell'API Videogular, un servizio globale disponibile su ogni istanza Videogular per gestire lo stato e ascoltare gli eventi.

Utilizzo di VgAPI per gestire gli stati

La nostra playlist multimediale è in questo momento funzionale al 100%, ma possiamo migliorare l'esperienza dell'utente riproducendo automaticamente i video quando viene selezionato un nuovo elemento o quando un video è completato.

Videogular espone un'API per controllare e ascoltare le modifiche per ogni istanza di VgMedia all'interno del componente VgPlayer . In realtà, tutti i moduli Videogular sono basati su questa API pubblica, quindi puoi creare i tuoi moduli per i tuoi clienti o contribuire alla community rilasciandoli come open source.

Per utilizzare l'API Videogular, devi solo ascoltare l'evento onPlayerReady generato dal componente VgPlayer:

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

Quando il player viene inizializzato, puoi salvare l'API e iniziare ad ascoltare gli eventi inviati dal tag video :

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

L'API Videogular si basa su RxJS, quindi puoi subscribe a Observables e reagire di conseguenza. Per riprodurre automaticamente i video, dobbiamo ascoltare l'evento loadedmetadata .

Aggiungiamo un nuovo Subscription per riprodurre il video quando vengono caricati i metadati:

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

È stato facile; riproduciamo semplicemente il video tramite VgAPI quando viene attivato l'osservabile loadedMetadata .

Ricordi la proprietà currentIndex ? Ora è il momento di usarlo in modo da poter passare al video successivo quando il video corrente è completato:

 // ... 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 questo metodo, possiamo gestire quando l'evento ended viene attivato dal tag video e quindi passare al video successivo. Abbiamo anche aggiunto un piccolo controllo per fare un loop infinito quando raggiungiamo la fine della playlist impostando currentIndex = 0; così possiamo tornare al primo elemento. Infine impostiamo il currentItem che aggiornerà i nostri binding Angular nell'interfaccia utente.

Come puoi vedere, non stiamo riproducendo il video qui; questo perché lo gestiamo con l'osservabile loadedMetadata . Quando aggiorniamo currentItem all'interno nextVideo() , viene caricato un nuovo video e questo attiva l'osservabile loadedMetadata .

Questo rende il nostro codice più facile da leggere e più difficile da decifrare! Gli osservabili sono fantastici vero?

Qual è il prossimo?

Da qui, potremmo aggiungere alcuni controlli video HTML5 per rimuovere la riproduzione automatica o il ciclo infinito, inserire annunci pubblicitari o sincronizzare informazioni.

In questa demo, abbiamo appena scalfito la superficie di ciò che è possibile fare con Videogular. L'API è in grado di gestire più file multimediali contemporaneamente, abbiamo moduli per lo streaming e la pubblicità e puoi persino creare un lettore multimediale per riprodurre animazioni, percorsi in una mappa e molto altro.

Videogular è rilasciato sotto una licenza MIT ed è un progetto open source disponibile su GitHub. Tutti sono invitati a creare una richiesta pull, inviare un problema, scrivere documentazione e contribuire alla comunità.