Construire un lecteur vidéo angulaire avec Videogular

Selon les statistiques de trafic en ligne, la vidéo prend le contrôle du Web. La bonne vieille télévision est en train de mourir et les entreprises évoluent rapidement pour dominer un marché qui représentera les 80% du trafic en ligne d'ici 2019.

De nombreux fournisseurs et produits multimédias s'appuient sur la prise en charge de la vidéo HTML5 :

• Youtube : plateforme de partage de vidéos et de réseaux sociaux HTML5
• Netflix : fournisseur de contenu vidéo HTML5
• JWPlayer : service vidéo HTML5 et fournisseur de streaming
• Brightcove : service vidéo HTML5 et fournisseur de streaming
• Kaltura : service vidéo HTML5 et fournisseur de streaming
• Video.js : lecteur vidéo HTML5
• Flowplayer : lecteur vidéo HTML5 et fournisseur de streaming

La communauté des développeurs a besoin d'un cadre multimédia solide, extensible et avancé (pas seulement un lecteur vidéo HTML5) pour faire face aux nouveaux défis qui l'attendent. Dans cet article, je souhaite présenter un de ces frameworks : Videogular .

Qu'est-ce que la vidéogular ?

Comme son nom l'indique, Videogular est un framework multimédia écrit en Angular 2+. Avec Videogular, vous pouvez lire de la vidéo HTML5, de l'audio ou tout autre contenu de votre choix. Il existe une implémentation pour Angular 1.X (alias AngularJS), mais dans cet article, nous ne parlerons que de la version actuelle d'Angular 2+.

Donc, la prochaine question qui vous traverse probablement l'esprit est : pourquoi utiliser Angular pour la vidéo ?

Eh bien, il existe un certain nombre de bonnes raisons de choisir un cadre spécifique pour créer une vidéothèque.

• Facilité de contribution : Étant donné que Videogular est basé sur Angular, un framework populaire avec une communauté très active, il est très facile pour d'autres personnes de commencer à contribuer en créant des plugins ou en corrigeant des bogues.
• Composants Web : pas besoin d'écrire du JavaScript pour créer et styliser votre propre lecteur. Vous pouvez écrire du code HTML et CSS.
• TypeScript : Angular est un framework typé, ainsi que toutes les bibliothèques qui l'entourent. Avoir un écosystème fortement typé nous permet de détecter les bugs et les problèmes d'architecture avant qu'il ne soit trop tard.
• Vitesse : Tous les derniers frameworks populaires sont extrêmement rapides, y compris Angular.

De plus, nous avons d'autres fonctionnalités intéressantes telles que RxJS, AOT (compilation anticipée), la CLI angulaire, etc.

Comment fonctionne la vidéogular ?

J'aime dire que Videogular est plus un framework multimédia qu'un simple lecteur vidéo HTML5. La fonctionnalité la plus pertinente et la différence entre les autres lecteurs vidéo est que vous écrivez des balises pour configurer votre lecteur au lieu de JavaScript.

Voici comment la plupart des lecteurs vidéo fonctionnent actuellement :

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

Et voici à quoi ressemble l'implémentation 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>

La bonne chose à propos de Videogular est que, avec un simple coup d'œil au code HTML, vous savez comment fonctionne ce lecteur, quelles commandes sont disponibles et comment le modifier pour supprimer, par exemple, les pistes et le sélecteur de piste.

Mais ce n'est pas le seul avantage dont nous pouvons bénéficier lors de la construction d'un lecteur vidéo angulaire. Pensez aux grandes équipes de développement où les concepteurs HTML/CSS et les développeurs JavaScript travaillent ensemble sur la même base de code. Comme nous utilisons des éléments personnalisés, les concepteurs peuvent commencer à travailler en appliquant des styles et des animations sans avoir besoin d'apprendre une nouvelle bibliothèque ou même JavaScript/TypeScript.

De plus, Videogular offre des fonctionnalités bien plus puissantes que la simple écriture d'un simple lecteur vidéo Angular, comme la synchronisation automatique entre plusieurs fichiers multimédias, ou la possibilité de lire non seulement de la vidéo/audio, mais à peu près n'importe quel contenu qui a un début et une fin.

Pour voir à quel point il est facile de créer une application riche et interactive avec Videogular, nous allons créer une liste de lecture vidéo avec des métadonnées synchronisées.

Comment installer Videogular

Dans cet exemple, nous aurons une liste de vidéos et un extrait connexe de Wikipédia, juste au cas où l'utilisateur aurait besoin de plus d'informations sur la vidéo.

Tout le code est disponible sur notre référentiel GitHub Videogular Showroom et il est publié sous forme de page GitHub.

L'installation de Videogular devrait être une affaire simple pour tout développeur angulaire qualifié. D'un autre côté, si vous débutez avec Angular, vous devriez consulter ce guide rapide pour créer votre première application Angular.

Si vous n'avez pas encore installé Node.js, rendez-vous sur le site officiel de Node.js et installez-le. C'est le seul serveur dont nous avons besoin pour développer avec Angular, et nous en avons besoin pour installer des dépendances via NPM. Vous devez juste vous assurer d'installer Node.js 6.9.0 ou supérieur et NPM 3.0.0 ou supérieur.

La première chose que nous devons faire est d'installer la CLI angulaire. La CLI angulaire est un outil indispensable pour tout développeur angulaire, car elle fournit un échafaudage, des tests, des serveurs de développement et des versions de production faciles. Plus important encore, il suit une convention que tout autre développeur angulaire peut comprendre.

Installez la CLI angulaire globalement via NPM :

 npm install -g @angular/cli

Et créons notre premier projet avec le support de SASS :

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

Cela devrait créer un exemple de projet pour vous. Si vous souhaitez commencer à développer et à observer les résultats en même temps, vous pouvez exécuter npm run start et ouvrir [http://localhost:4200](http://localhost:4200) . La CLI angulaire exécutera un serveur de développement Node.js avec un rechargement en direct et toutes les fonctionnalités intéressantes que nous aimons en tant que développeurs.

Vous pouvez maintenant installer la bibliothèque videogular2 et les typages core-js :

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

Création d'un lecteur vidéo angulaire

Si vous le souhaitez, vous pouvez utiliser la police officielle Videogular pour définir des icônes sur vos boutons et commandes. Pour ce faire, vous devez ajouter du CSS à votre fichier .angular-cli.json disponible à la racine de votre projet.

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

Si vous souhaitez définir vos propres polices et styles, vous pouvez définir votre CSS personnalisé ici ou dans styles.scss .

Pour commencer à utiliser Videogular dans votre projet, vous devez ajouter le module Videogular à votre module d'application.

Ouvrez src/app/app.module.ts et supprimez le FormsModule et le HttpModule ; nous n'en aurons pas besoin pour cette démo. Voici comment votre fichier app.module.ts devrait ressembler :

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

Avec tout mis en place, nous n'avons plus qu'à écrire notre code 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>

Vous pouvez maintenant exécuter le serveur et profiter de votre première application vidéo alimentée par Angular et Videogular.

 npm run start

Construire une liste de lecture multimédia dans Angular

Pour lister nos vidéos, nous allons créer un tableau simple avec toutes les options. Gardez simplement à l'esprit que vous pouvez charger cette liste via un service REST avec le HttpModule d'Angular, mais par souci de simplicité, nous le ferons en dur dans cette démo.

Ouvrez app.component.ts et ajoutez ce tableau de vidéos et son interface :

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

Nous sommes maintenant prêts à ajouter la liste de lecture sous notre lecteur dans le fichier HTML :

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

Ajoutons quelques styles pour la classe selected et l'effet 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; } } }

La méthode onClickPlaylistItem définira le média à lire sur notre lecteur Videogular. Passons maintenant à app.component.ts pour ajouter la méthode :

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

La propriété currentIndex sera utilisée plus tard pour identifier l'élément courant et sa position dans la playlist. Ceci est important pour créer des listes de lecture en boucle infinie et mettre à jour le currentIndex lorsque l'utilisateur clique sur un élément de la liste de lecture.

Enfin, il suffit de modifier l'élément video pour définir la source à partir de la propriété currentItem gérée par la playlist. Nous allons créer pour cela une simple liaison à la propriété src de l'élément vidéo HTML5 :

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

Nous pouvons maintenant tester notre liste de lecture et voir comment cela fonctionne. La première vidéo est chargée au début et on peut changer de vidéo, donc tout va bien ! Mais nous pouvons apporter quelques modifications et améliorer l'expérience en basculant automatiquement entre les vidéos lorsqu'une vidéo est terminée et en ajoutant une meilleure gestion globale de l'état du lecteur.

Pour ce faire, nous aurons besoin de l'API Videogular, un service global disponible sur chaque instance Videogular pour gérer l'état et écouter les événements.

Utilisation de VgAPI pour gérer les états

Notre liste de lecture multimédia est actuellement 100 % fonctionnelle, mais nous pouvons améliorer l'expérience utilisateur en lisant automatiquement des vidéos lorsqu'un nouvel élément est sélectionné ou lorsqu'une vidéo est terminée.

Videogular expose une API pour contrôler et écouter les changements pour chaque instance VgMedia à l'intérieur du composant VgPlayer . En fait, tous les modules Videogular sont basés sur cette API publique, vous pouvez donc créer vos propres modules pour vos clients ou contribuer à la communauté en les publiant en open source.

Pour utiliser l'API Videogular, il vous suffit d'écouter l'événement onPlayerReady déclenché par le composant VgPlayer :

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

Lorsque le lecteur est initialisé, vous pouvez enregistrer l'API et commencer à écouter les événements envoyés par la balise video :

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

L'API Videogular est basée sur RxJS, vous pouvez donc vous subscribe à Observables et réagir en conséquence. Pour lire automatiquement les vidéos, nous devons loadedmetadata l'événementloadedmetadata.

Ajoutons un nouvel Subscription pour lire la vidéo lorsque les métadonnées sont chargées :

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

C'était facile; nous jouons simplement la vidéo via le loadedMetadata lorsque l'observable de métadonnées chargées est déclenché.

Vous souvenez-vous de la propriété currentIndex ? C'est maintenant le moment de l'utiliser afin que nous puissions passer à la vidéo suivante lorsque la vidéo en cours est terminée :

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

Avec cette méthode, nous pouvons gérer le moment où l'événement ended est déclenché par la balise video , puis passer à la vidéo suivante. Nous avons également ajouté un petit contrôle pour faire une boucle infinie lorsque nous atteignons la fin de la playlist en définissant currentIndex = 0; afin que nous puissions revenir au premier élément. Enfin, nous définissons le currentItem qui mettra à jour nos liaisons angulaires dans l'interface utilisateur.

Comme vous pouvez le voir, nous ne diffusons pas la vidéo ici ; c'est parce que nous gérons cela avec l'observable de loadedMetadata . Lorsque nous mettons à jour le currentItem à l'intérieur nextVideo() , une nouvelle vidéo est chargée et cela déclenche l' loadedMetadata .

Cela rend notre code plus facile à lire et plus difficile à casser ! Les observables sont géniaux, n'est-ce pas ?

Et après?

À partir de là, nous pourrions ajouter des contrôles vidéo HTML5 pour supprimer la lecture automatique ou la boucle infinie, injecter des publicités ou synchroniser des informations.

Dans cette démo, nous venons de gratter la surface de ce qu'il est possible de faire avec Videogular. L'API est capable de gérer plusieurs fichiers multimédias en même temps, nous avons des modules de streaming et de publicité, et vous pouvez même créer un lecteur multimédia pour lire des animations, des itinéraires dans une carte, et bien plus encore.

Videogular est publié sous une licence MIT et est un projet open source disponible sur GitHub. Tout le monde est invité à créer une demande d'extraction, à soumettre un problème, à rédiger de la documentation et à contribuer à la communauté.