Erstellen eines Angular-Videoplayers mit Videogular

Laut Online-Traffic-Statistiken übernimmt Video die Kontrolle über das Internet. Das gute alte Fernsehen liegt im Sterben und Unternehmen versuchen schnell, einen Markt zu dominieren, der bis 2019 80 % des Online-Verkehrs ausmachen wird.

Viele Medienanbieter und Produkte setzen auf HTML5-Videounterstützung:

• Youtube: HTML5-Video- und Social-Sharing-Plattform
• Netflix: Anbieter von HTML5-Videoinhalten
• JWPlayer: HTML5-Videodienst und Streaming-Anbieter
• Brightcove: HTML5-Videodienst und Streaming-Anbieter
• Kaltura: HTML5-Videodienst und Streaming-Anbieter
• Video.js: HTML5-Videoplayer
• Flowplayer: HTML5-Videoplayer und Streaming-Anbieter

Die Entwicklergemeinschaft benötigt ein solides, erweiterbares und fortschrittliches Medien-Framework (nicht nur einen HTML5-Videoplayer), um sich den neuen Herausforderungen zu stellen, die vor ihnen liegen. In diesem Artikel möchte ich ein solches Framework vorstellen: Videogular .

Was ist Videogular?

Wie der Name schon sagt, ist Videogular ein in Angular 2+ geschriebenes Medienframework. Mit Videogular können Sie HTML5-Videos, -Audio oder andere gewünschte Inhalte abspielen. Es gibt eine Implementierung für Angular 1.X (alias AngularJS), aber in diesem Artikel werden wir nur über die aktuelle Version von Angular 2+ sprechen.

Die nächste Frage, die Ihnen wahrscheinlich in den Sinn kommt, ist: Warum Angular für Videos verwenden?

Nun, es gibt eine Reihe guter Gründe, ein bestimmtes Framework zum Erstellen einer Videobibliothek zu wählen.

• Einfache Beiträge: Da Videogular auf Angular basiert, einem beliebten Framework mit einer sehr aktiven Community, ist es für andere sehr einfach, Beiträge zu leisten, indem sie Plugins erstellen oder Fehler beheben.
• Webkomponenten: Sie müssen kein JavaScript schreiben, um Ihren eigenen Player zu erstellen und zu stylen. Sie können HTML- und CSS-Code schreiben.
• TypeScript: Angular ist ein typisiertes Framework sowie alle Bibliotheken drumherum. Ein stark typisiertes Ökosystem ermöglicht es uns, Fehler und Architekturprobleme zu erkennen, bevor es zu spät ist.
• Geschwindigkeit: Alle neuesten beliebten Frameworks sind blitzschnell, einschließlich Angular.

Darüber hinaus haben wir einige andere coole Funktionen wie RxJS, AOT (Ahead-of-Time Compilation), die Angular CLI und mehr.

Wie funktioniert Videogular?

Ich sage gerne, dass Videogular eher ein Medienframework als nur ein HTML5-Videoplayer ist. Die relevanteste Funktion und der wichtigste Unterschied zu anderen Videoplayern besteht darin, dass Sie anstelle von JavaScript Tags schreiben, um Ihren Player einzurichten.

So funktionieren derzeit die meisten Videoplayer:

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

Und so sieht die Implementierung von Videogular aus:

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

Das Gute an Videogular ist, dass Sie mit nur einem kurzen Blick auf den HTML-Code wissen, wie dieser Player funktioniert, welche Steuerelemente verfügbar sind und wie Sie ihn ändern können, um beispielsweise die Titel und die Titelauswahl zu entfernen.

Dies ist jedoch nicht der einzige Vorteil, von dem wir beim Erstellen eines Angular-Videoplayers profitieren können. Denken Sie an große Entwicklungsteams, in denen HTML/CSS-Designer und JavaScript-Entwickler auf derselben Codebasis zusammenarbeiten. Da wir benutzerdefinierte Elemente verwenden, können Designer mit der Arbeit beginnen, indem sie Stile und Animationen anwenden, ohne eine neue Bibliothek oder sogar JavaScript/TypeScript lernen zu müssen.

Außerdem bietet Videogular viel leistungsfähigere Funktionen als nur das Schreiben eines einfachen Angular-Videoplayers, wie die automatische Synchronisierung zwischen mehreren Mediendateien oder die Möglichkeit, nicht nur Video/Audio abzuspielen, sondern so ziemlich jeden Inhalt, der einen Anfang und ein Ende hat.

Um zu sehen, wie einfach es ist, mit Videogular eine reichhaltige, interaktive App zu erstellen, werden wir eine Video-Playlist mit synchronisierten Metadaten erstellen.

So installieren Sie Videogular

In diesem Beispiel haben wir eine Liste von Videos und einen zugehörigen Auszug aus Wikipedia, nur für den Fall, dass der Benutzer mehr Informationen über das Video benötigt.

Der gesamte Code ist in unserem Videogular Showroom GitHub-Repository verfügbar und wird als GitHub-Seite veröffentlicht.

Die Installation von Videogular sollte für jeden erfahrenen Angular-Entwickler eine einfache Angelegenheit sein. Wenn Sie andererseits gerade erst mit Angular beginnen, sollten Sie sich diese Kurzanleitung zum Erstellen Ihrer ersten Angular-App ansehen.

Wenn Sie Node.js noch nicht installiert haben, gehen Sie zur offiziellen Website von Node.js und installieren Sie es. Dies ist der einzige Server, den wir mit Angular entwickeln müssen, und wir brauchen ihn, um Abhängigkeiten über NPM zu installieren. Sie müssen lediglich Node.js 6.9.0 oder höher und NPM 3.0.0 oder höher installieren.

Als erstes müssen wir die Angular CLI installieren. Die Angular-CLI ist ein unverzichtbares Tool für jeden Angular-Entwickler, da sie einfache Gerüste, Tests, Entwicklungsserver und Produktions-Builds bietet. Noch wichtiger ist, dass es einer Konvention folgt, die jeder andere Angular-Entwickler verstehen kann.

Installieren Sie die Angular-CLI global über NPM:

 npm install -g @angular/cli

Und lassen Sie uns unser erstes Projekt mit Unterstützung für SASS erstellen:

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

Dadurch sollte ein Beispielprojekt für Sie erstellt werden. Wenn Sie mit der Entwicklung beginnen und gleichzeitig die Ergebnisse ansehen möchten, können Sie npm run start und [http://localhost:4200](http://localhost:4200) öffnen. Die Angular-CLI wird einen Node.js-Entwicklungsserver mit Live-Neuladen und all den coolen Funktionen ausführen, die wir als Entwickler lieben.

Jetzt können Sie die videogular2 -Bibliothek und core-js installieren:

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

Erstellen eines Angular-Videoplayers

Wenn Sie möchten, können Sie die offizielle Videogular-Schriftart verwenden, um Symbole auf Ihren Schaltflächen und Steuerelementen festzulegen. Dazu müssen Sie CSS zu Ihrer .angular-cli.json Datei hinzufügen, die im Stammverzeichnis Ihres Projekts verfügbar ist.

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

Wenn Sie Ihre eigene Schriftart und Stile festlegen möchten, können Sie Ihr benutzerdefiniertes CSS hier oder innerhalb styles.scss .

Um Videogular in Ihrem Projekt zu verwenden, müssen Sie das Videogular-Modul zu Ihrem Anwendungsmodul hinzufügen.

Öffnen src/app/app.module.ts und entfernen Sie das FormsModule und das HttpModule; wir werden sie für diese Demo nicht benötigen. So sollte Ihre app.module.ts -Datei aussehen:

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

Wenn alles eingerichtet ist, müssen wir nur noch unseren HTML-Code schreiben!

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

Jetzt können Sie den Server ausführen und Ihre erste Video-App genießen, die von Angular und Videogular unterstützt wird.

 npm run start

Erstellen einer Medienwiedergabeliste in Angular

Um unsere Videos aufzulisten, erstellen wir ein einfaches Array mit allen Optionen. Denken Sie nur daran, dass Sie diese Liste über einen REST-Dienst mit dem HttpModule von Angular laden können, aber der Einfachheit halber werden wir dies in dieser Demo fest codieren.

Öffnen app.component.ts und fügen Sie diese Reihe von Videos und ihre Schnittstelle hinzu:

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

Jetzt können wir die Wiedergabeliste unter unserem Player in die HTML-Datei einfügen:

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

Lassen Sie uns einige Stile für die selected Klasse und den hover -Effekt hinzufügen:

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

Die Methode onClickPlaylistItem stellt die Medien so ein, dass sie auf unserem Videogular-Player abgespielt werden. Gehen wir jetzt zu app.component.ts , um die Methode hinzuzufügen:

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

Die Eigenschaft currentIndex wird später verwendet, um das aktuelle Element und seine Position in der Wiedergabeliste zu identifizieren. Dies ist wichtig, um Endlosschleifen-Wiedergabelisten zu erstellen und den currentIndex zu aktualisieren, wenn der Benutzer auf ein Element der Wiedergabeliste klickt.

Schließlich müssen wir nur das video ändern, um die Quelle aus der Eigenschaft currentItem , die von der Wiedergabeliste verwaltet wird. Dazu erstellen wir eine einfache Bindung an die Eigenschaft src des HTML5-Videoelements:

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

Jetzt können wir unsere Playlist testen und sehen, wie sie funktioniert. Das erste Video wird am Anfang geladen und wir können zwischen den Videos wechseln, also alles gut! Aber wir können einige Optimierungen vornehmen und das Erlebnis verbessern, indem wir automatisch zwischen Videos wechseln, wenn ein Video fertig ist, und eine bessere Gesamtverwaltung des Playerstatus hinzufügen.

Dazu benötigen wir die Videogular-API, einen globalen Dienst, der auf jeder Videogular-Instanz verfügbar ist, um den Status zu verwalten und auf Ereignisse zu lauschen.

Verwenden von VgAPI zum Verarbeiten von Zuständen

Unsere Medien-Playlist ist derzeit zu 100 % funktionsfähig, aber wir können die Benutzererfahrung verbessern, indem wir Videos automatisch abspielen, wenn ein neues Element ausgewählt oder ein Video fertiggestellt wird.

Videogular stellt eine API bereit, um Änderungen für jede VgMedia Instanz innerhalb der VgPlayer Komponente zu steuern und abzuhören. Tatsächlich basieren alle Videogular-Module auf dieser öffentlichen API, sodass Sie Ihre eigenen Module für Ihre Kunden erstellen oder zur Community beitragen können, indem Sie sie als Open Source veröffentlichen.

Um die Videogular-API zu verwenden, müssen Sie nur auf das von der VgPlayer-Komponente ausgelöste onPlayerReady Ereignis warten:

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

Wenn der Player initialisiert ist, können Sie die API speichern und damit beginnen, auf die vom video Tag gesendeten Ereignisse zu lauschen:

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

Die Videogular-API basiert auf RxJS, sodass Sie Observables subscribe und entsprechend reagieren können. Um die Videos automatisch abzuspielen, müssen wir auf das loadedmetadata Ereignis warten.

Lassen Sie uns ein neues Subscription hinzufügen, um das Video abzuspielen, wenn die Metadaten geladen werden:

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

Das war einfach; Wir spielen das Video einfach über die VgAPI ab, wenn das loadedMetadata Observable ausgelöst wird.

Erinnern Sie sich an die Eigenschaft currentIndex ? Jetzt ist der Moment, es zu verwenden, damit wir zum nächsten Video übergehen können, wenn das aktuelle Video fertig ist:

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

Mit dieser Methode können wir behandeln, wann das ended Ereignis vom video Tag ausgelöst wird, und dann zum nächsten Video übergehen. Wir haben auch ein kleines Steuerelement hinzugefügt, um eine Endlosschleife auszuführen, wenn wir das Ende der Wiedergabeliste erreichen, indem wir currentIndex = 0; damit wir zum ersten Punkt zurückkehren können. Schließlich setzen wir das currentItem , das unsere Angular-Bindungen in der Benutzeroberfläche aktualisiert.

Wie Sie sehen können, spielen wir das Video hier nicht ab; Das liegt daran, dass wir dies mit dem Observable loadedMetadata “ handhaben. Wenn wir das currentItem innerhalb nextVideo() aktualisieren, wird ein neues Video geladen und das löst das loadedMetadata Observable aus.

Dadurch wird unser Code leichter lesbar und schwerer zu knacken! Observables sind großartig, oder?

Was kommt als nächstes?

Von hier aus könnten wir einige HTML5-Videosteuerelemente hinzufügen, um die automatische Wiedergabe oder die Endlosschleife zu entfernen, Werbung einzufügen oder Informationen zu synchronisieren.

In dieser Demo haben wir nur an der Oberfläche dessen gekratzt, was mit Videogular möglich ist. Die API ist in der Lage, mehrere Mediendateien gleichzeitig zu verwalten, wir haben Module für Streaming und Werbung, und Sie können sogar einen Mediaplayer erstellen, um Animationen, Routen in einer Karte und vieles mehr abzuspielen.

Videogular wird unter einer MIT-Lizenz veröffentlicht und ist ein Open-Source-Projekt, das auf GitHub verfügbar ist. Jeder ist willkommen, einen Pull-Request zu erstellen, ein Issue einzureichen, Dokumentation zu schreiben und zur Community beizutragen.