Construirea unui player video angular cu Videogular

Potrivit statisticilor de trafic online, video-ul preia controlul asupra webului. Vechiul televizor bun este pe moarte, iar companiile se mișcă rapid pentru a domina o piață care va reprezenta 80% din traficul online până în 2019.

Mulți furnizori și produse media se bazează pe suportul video HTML5:

• Youtube: video HTML5 și platformă de partajare socială
• Netflix: furnizor de conținut video HTML5
• JWPlayer: furnizor de servicii video HTML5 și streaming
• Brightcove: furnizor de servicii video HTML5 și streaming
• Kaltura: furnizor de servicii video HTML5 și streaming
• Video.js: player video HTML5
• Flowplayer: player video HTML5 și furnizor de streaming

Comunitatea dezvoltatorilor are nevoie de un cadru media solid, extensibil și avansat (nu doar un player video HTML5) pentru a face față noilor provocări care urmează. În acest articol, vreau să introduc un astfel de cadru: Videogular .

Ce este videogular?

După cum sugerează și numele, Videogular este un cadru media scris în Angular 2+. Cu Videogular, puteți reda videoclipuri HTML5, audio sau orice alt conținut dorit. Există o implementare pentru Angular 1.X (aka AngularJS), dar în acest articol vom vorbi doar despre versiunea actuală Angular 2+.

Deci, următoarea întrebare care probabil vă trece prin minte este: De ce să folosiți Angular pentru video?

Ei bine, există o serie de motive bune pentru a alege un cadru specific pentru a crea o bibliotecă video.

• Ușurință în contribuție: Deoarece Videogular se bazează pe Angular, un cadru popular cu o comunitate foarte activă, este foarte ușor pentru alți oameni să înceapă să contribuie prin crearea de pluginuri sau remedierea erorilor.
• Componente web: nu este nevoie să scrieți JavaScript pentru a crea și a crea propriul player. Puteți scrie cod HTML și CSS.
• TypeScript: Angular este un cadru tipizat, precum și toate bibliotecile din jurul lui. Având un ecosistem puternic tipizat, ne permite să detectăm erori și probleme de arhitectură înainte de a fi prea târziu.
• Viteză: toate cele mai recente cadre populare sunt fulgerătoare, inclusiv Angular.

În plus, avem și alte caracteristici interesante, cum ar fi RxJS, AOT (compilare anticipată), CLI Angular și multe altele.

Cum funcționează Videogular?

Îmi place să spun că Videogular este mai mult un cadru media decât un simplu player video HTML5. Cea mai relevantă caracteristică și diferență între alte playere video este că scrieți etichete pentru a vă configura playerul în loc de JavaScript.

Iată cum funcționează majoritatea playerelor video acum:

 <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>

Și așa arată implementarea 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>

Lucrul bun despre Videogular este că, doar cu o privire rapidă la codul HTML, știi cum funcționează acest player, ce comenzi sunt disponibile și cum să-l modifici pentru a elimina, de exemplu, melodiile și selectorul de melodii.

Dar acesta nu este singurul avantaj de care putem beneficia atunci când construim un player video Angular. Gândiți-vă la echipe mari de dezvoltare în care designerii HTML/CSS și dezvoltatorii JavaScript lucrează împreună pe aceeași bază de cod. Deoarece folosim elemente personalizate, designerii pot începe să lucreze aplicând stiluri și animații fără a fi nevoie să învețe o nouă bibliotecă sau chiar JavaScript/TypeScript.

De asemenea, Videogular oferă capabilități mult mai puternice decât simpla scriere a unui player video Angular simplu, cum ar fi sincronizarea automată între mai multe fișiere media sau capacitatea de a reda nu numai video/audio, ci aproape orice conținut care are un început și un sfârșit.

Pentru a vedea cât de ușor este să creezi o aplicație bogată și interactivă cu Videogular, vom crea o listă de redare video cu metadate sincronizate.

Cum se instalează Videogular

În acest exemplu, vom avea o listă de videoclipuri și un fragment aferent din Wikipedia, doar în cazul în care utilizatorul trebuie să aibă mai multe informații despre videoclip.

Tot codul este disponibil în depozitul nostru Videogular Showroom GitHub și este publicat ca pagină GitHub.

Instalarea videogulară ar trebui să fie o afacere simplă pentru orice dezvoltator Angular calificat. Pe de altă parte, dacă tocmai ați început în Angular, ar trebui să consultați acest ghid rapid pentru a vă crea prima aplicație Angular.

Dacă nu ați instalat încă Node.js, accesați site-ul web oficial Node.js și instalați-l. Acesta este singurul server pe care trebuie să-l dezvoltăm cu Angular și avem nevoie de el pentru a instala dependențe prin NPM. Trebuie doar să vă asigurați că instalați Node.js 6.9.0 sau o versiune ulterioară și NPM 3.0.0 sau o versiune ulterioară.

Primul lucru pe care trebuie să-l facem este să instalăm Angular CLI. Angular CLI este un instrument obligatoriu pentru orice dezvoltator Angular, deoarece oferă schele ușoare, testare, servere de dezvoltare și versiuni de producție. Și mai important, urmează o convenție pe care orice alt dezvoltator Angular o poate înțelege.

Instalați CLI-ul Angular la nivel global prin NPM:

 npm install -g @angular/cli

Și să creăm primul nostru proiect cu sprijin pentru SASS:

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

Acest lucru ar trebui să creeze un proiect exemplu pentru dvs. Dacă doriți să începeți să dezvoltați și să urmăriți rezultatele în același timp, puteți rula npm run start și deschideți [http://localhost:4200](http://localhost:4200) . Angular CLI va rula un server de dezvoltare Node.js cu reîncărcare live și toate caracteristicile interesante pe care noi, ca dezvoltatori, le iubim.

Acum puteți instala biblioteca videogular2 și tastările core-js :

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

Crearea unui player video Angular

Dacă doriți, puteți utiliza fontul oficial Videogular pentru a seta pictograme pe butoanele și comenzile dvs. Pentru a face acest lucru, trebuie să adăugați CSS la fișierul dvs. .angular-cli.json disponibil la rădăcina proiectului.

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

Dacă doriți să vă setați propriile fonturi și stiluri, puteți seta CSS-ul personalizat aici sau în interiorul styles.scss .

Pentru a începe să utilizați Videogular în proiectul dvs., trebuie să adăugați modulul Videogular la modulul de aplicație.

Deschideți src/app/app.module.ts și eliminați FormsModule și HttpModule; nu vom avea nevoie de ele pentru acest demo. Acesta este modul în care ar trebui să fie fișierul dvs. 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 { }

Cu totul configurat, trebuie doar să ne scriem codul 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>

Acum puteți rula serverul și vă puteți bucura de prima aplicație video alimentată de Angular și Videogular.

 npm run start

Crearea unei liste de redare media în Angular

Pentru a enumera videoclipurile noastre, vom crea o matrice simplă cu toate opțiunile. Rețineți că puteți încărca această listă printr-un serviciu REST cu HttpModule de la Angular, dar, de dragul simplității, vom face acest lucru codificat în acest demo.

Deschideți app.component.ts și adăugați această serie de videoclipuri și interfața sa:

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

Acum suntem gata să adăugăm lista de redare sub playerul nostru în fișierul HTML:

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

Să adăugăm câteva stiluri pentru clasa selected și efectul 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; } } }

Metoda onClickPlaylistItem va seta media să fie redată pe playerul nostru Videogular. Să mergem acum la app.component.ts pentru a adăuga metoda:

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

Proprietatea currentIndex va fi folosită ulterior pentru a identifica elementul curent și poziția acestuia în lista de redare. Acest lucru este important pentru a face liste de redare în buclă infinită și pentru a actualiza currentIndex curent atunci când utilizatorul face clic pe un articol din lista de redare.

În cele din urmă, trebuie doar să modificăm elementul video pentru a seta sursa din proprietatea currentItem gestionată de lista de redare. Vom crea pentru aceasta o legare simplă la proprietatea src a elementului video HTML5:

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

Acum putem testa lista noastră de redare și să vedem cum funcționează. Primul videoclip este încărcat la început și putem schimba între videoclipuri, așa că totul este în regulă! Dar putem face câteva ajustări și îmbunătăți experiența prin comutarea automată între videoclipuri atunci când un videoclip este finalizat și adăugând o gestionare generală mai bună a stării playerului.

Pentru a face acest lucru, vom avea nevoie de API-ul Videogular, un serviciu global disponibil pe fiecare instanță Videogular pentru a gestiona starea și a asculta evenimente.

Folosind VgAPI pentru a gestiona stările

Lista noastră de redare media este acum 100% funcțională, dar putem îmbunătăți experiența utilizatorului prin redarea automată a videoclipurilor când este selectat un element nou sau când un videoclip este finalizat.

Videogular expune un API pentru a controla și a asculta modificările pentru fiecare instanță VgMedia din componenta VgPlayer . De fapt, toate modulele Videogular se bazează pe acest API public, așa că vă puteți crea propriile module pentru clienții dvs. sau puteți contribui la comunitate lansându-le ca sursă deschisă.

Pentru a utiliza API-ul Videogular, trebuie doar să ascultați evenimentul onPlayerReady declanșat de componenta VgPlayer:

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

Când playerul este inițializat, puteți salva API-ul și puteți începe să ascultați evenimentele trimise de eticheta video :

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

API-ul Videogular se bazează pe RxJS, așa că vă puteți subscribe la Observables și puteți reacționa în consecință. Pentru a reda automat videoclipurile, trebuie să ascultăm evenimentul loadedmetadata .

Să adăugăm un nou Subscription pentru a reda videoclipul când metadatele sunt încărcate:

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

A fost ușor; pur și simplu redăm videoclipul prin VgAPI atunci când observabilul loadedMetadata este declanșat.

Vă amintiți proprietatea currentIndex ? Acum este momentul să îl folosim, astfel încât să putem trece la următorul videoclip când videoclipul curent este finalizat:

 // ... 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 ]; } // ... }

Cu această metodă, ne putem descurca când evenimentul ended este declanșat de eticheta video și apoi trecem la următorul videoclip. De asemenea, am adăugat un mic control pentru a face o buclă infinită când ajungem la sfârșitul listei de redare setând currentIndex = 0; astfel încât să ne întoarcem la primul articol. În cele din urmă, currentItem elementul curent care va actualiza legăturile noastre unghiulare în UI.

După cum puteți vedea, nu redăm videoclipul aici; asta pentru că ne ocupăm de asta cu loadedMetadata observabil. Când actualizăm elementul curent în interiorul currentItem nextVideo() , este încărcat un nou videoclip și care declanșează observabilul loadedMetadata .

Acest lucru face codul nostru mai ușor de citit și mai greu de spart! Observatorii sunt minunati, nu?

Ce urmeaza?

De aici, am putea adăuga câteva comenzi video HTML5 pentru a elimina redarea automată sau bucla infinită, pentru a injecta reclame sau pentru a sincroniza informații.

În această demonstrație, doar am zgâriat suprafața a ceea ce este posibil de făcut cu Videogular. API-ul este capabil să gestioneze mai multe fișiere media în același timp, avem module pentru streaming și publicitate și puteți chiar să creați un media player pentru a reda animații, rute pe o hartă și multe altele.

Videogular este lansat sub o licență MIT și este un proiect open-source disponibil pe GitHub. Toată lumea este binevenită să creeze o cerere de extragere, să trimită o problemă, să scrie documentație și să contribuie la comunitate.