Budowanie kątowego odtwarzacza wideo za pomocą Videogular

Według statystyk ruchu online, wideo przejmuje kontrolę nad siecią. Stara dobra telewizja umiera, a firmy szybko dążą do zdominowania rynku, który do 2019 r. będzie reprezentował 80% ruchu internetowego.

Wielu dostawców mediów i produktów korzysta z obsługi wideo HTML5:

• Youtube: platforma udostępniania wideo i społecznościowych HTML5
• Netflix: dostawca treści wideo HTML5
• JWPlayer: usługa wideo HTML5 i dostawca transmisji strumieniowych
• Brightcove: usługa wideo HTML5 i dostawca transmisji strumieniowych
• Kaltura: dostawca usług wideo HTML5 i przesyłania strumieniowego
• Video.js: odtwarzacz wideo HTML5
• Flowplayer: odtwarzacz wideo HTML5 i dostawca transmisji strumieniowej

Społeczność programistów potrzebuje solidnej, rozszerzalnej i zaawansowanej struktury multimedialnej (nie tylko odtwarzacza wideo HTML5), aby stawić czoła nowym wyzwaniom, które nadchodzą. W tym artykule chcę przedstawić jeden taki framework: Videogular .

Co to jest wideogular?

Jak sama nazwa wskazuje, Videogular to framework medialny napisany w Angular 2+. Dzięki Videogular możesz odtwarzać wideo, audio lub inne treści HTML5, które chcesz. Istnieje implementacja dla Angular 1.X (aka AngularJS), ale w tym artykule omówimy tylko aktualną wersję Angular 2+.

Więc następne pytanie, które prawdopodobnie przychodzi ci do głowy, brzmi: po co używać Angular do wideo?

Cóż, istnieje wiele dobrych powodów, dla których warto wybrać konkretny framework do stworzenia biblioteki wideo.

• Łatwość wnoszenia wkładu: Ponieważ Videogular jest oparty na Angular, popularnym frameworku z bardzo aktywną społecznością, innym osobom bardzo łatwo jest rozpocząć współtworzenie poprzez tworzenie wtyczek lub naprawianie błędów.
• Web Components: Nie ma potrzeby pisania JavaScript, aby stworzyć i stylizować swój własny odtwarzacz. Potrafisz pisać kod HTML i CSS.
• TypeScript: Angular to platforma z typami, a także wszystkie otaczające ją biblioteki. Posiadanie silnie typowanego ekosystemu pozwala nam wykrywać błędy i problemy z architekturą, zanim będzie za późno.
• Szybkość: wszystkie najnowsze popularne frameworki są niesamowicie szybkie, w tym Angular.

Dodatkowo mamy kilka innych fajnych funkcji, takich jak RxJS, AOT (kompilacja z wyprzedzeniem), Angular CLI i wiele innych.

Jak działa wideogwiazda?

Lubię mówić, że Videogular jest bardziej strukturą multimedialną niż tylko odtwarzaczem wideo HTML5. Najważniejszą cechą i różnicą między innymi odtwarzaczami wideo jest to, że zamiast JavaScriptu piszesz tagi do konfiguracji odtwarzacza.

Oto jak obecnie działa większość odtwarzaczy wideo:

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

A tak wygląda implementacja 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>

Dobrą rzeczą w Videogular jest to, że po szybkim spojrzeniu na kod HTML wiesz, jak działa ten odtwarzacz, które elementy sterujące są dostępne i jak je zmodyfikować, aby usunąć na przykład ścieżki i selektor ścieżek.

Ale to nie jedyna zaleta, z której możemy skorzystać, budując odtwarzacz wideo Angular. Pomyśl o dużych zespołach programistycznych, w których projektanci HTML/CSS i programiści JavaScript pracują razem na tej samej podstawie kodu. Ponieważ używamy elementów niestandardowych, projektanci mogą rozpocząć pracę, stosując style i animacje bez konieczności uczenia się nowej biblioteki czy nawet JavaScript/TypeScript.

Ponadto Videogular zapewnia znacznie potężniejsze możliwości niż pisanie zwykłego odtwarzacza wideo Angular, takie jak automatyczna synchronizacja między kilkoma plikami multimedialnymi lub możliwość odtwarzania nie tylko wideo/audio, ale prawie każdej treści, która ma początek i koniec.

Aby zobaczyć, jak łatwo jest stworzyć bogatą, interaktywną aplikację za pomocą Videogular, stworzymy playlistę wideo ze zsynchronizowanymi metadanymi.

Jak zainstalować Videogular

W tym przykładzie będziemy mieli listę filmów i powiązany fragment z Wikipedii, na wypadek, gdyby użytkownik potrzebował więcej informacji o filmie.

Cały kod jest dostępny w naszym repozytorium Videogular Showroom GitHub i jest opublikowany jako strona GitHub.

Instalacja Videogular powinna być prostą sprawą dla każdego wykwalifikowanego programisty Angular. Z drugiej strony, jeśli dopiero zaczynasz korzystać z Angulara, powinieneś zapoznać się z tym krótkim przewodnikiem po tworzeniu swojej pierwszej aplikacji Angular.

Jeśli nie zainstalowałeś jeszcze Node.js, przejdź do oficjalnej strony Node.js i zainstaluj go. Jest to jedyny serwer, który musimy rozwijać za pomocą Angulara i potrzebujemy go do instalowania zależności za pośrednictwem NPM. Musisz tylko upewnić się, że zainstalowałeś Node.js 6.9.0 lub nowszy oraz NPM 3.0.0 lub nowszy.

Pierwszą rzeczą, którą musimy zrobić, to zainstalować Angular CLI. Angular CLI jest niezbędnym narzędziem dla każdego programisty Angulara, ponieważ zapewnia łatwe tworzenie szkieletów, testowanie, serwery deweloperskie i kompilacje produkcyjne. Co ważniejsze, jest zgodny z konwencją, którą może zrozumieć każdy inny programista Angulara.

Zainstaluj Angular CLI globalnie przez NPM:

 npm install -g @angular/cli

I stwórzmy nasz pierwszy projekt z obsługą SASS:

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

To powinno stworzyć dla Ciebie przykładowy projekt. Jeśli chcesz jednocześnie rozpocząć programowanie i oglądać wyniki, możesz uruchomić npm run start i otworzyć [http://localhost:4200](http://localhost:4200) . Angular CLI będzie obsługiwać serwer programistyczny Node.js z funkcją ponownego ładowania na żywo i wszystkimi fajnymi funkcjami, które my jako programiści kochamy.

Teraz możesz zainstalować bibliotekę videogular2 i typowanie core-js :

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

Tworzenie odtwarzacza wideo Angular

Jeśli chcesz, możesz użyć oficjalnej czcionki Videogular, aby ustawić ikony na przyciskach i elementach sterujących. Aby to zrobić, musisz dodać CSS do pliku .angular-cli.json dostępnego w katalogu głównym projektu.

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

Jeśli chcesz ustawić własną czcionkę i style, możesz ustawić niestandardowy kod CSS tutaj lub wewnątrz styles.scss .

Aby zacząć używać Videogular w swoim projekcie, musisz dodać moduł Videogular do modułu aplikacji.

Otwórz src/app/app.module.ts i usuń FormsModule i HttpModule; nie będziemy ich potrzebować do tego demo. Oto jak powinien wyglądać Twój plik 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 { }

Po skonfigurowaniu wszystkiego wystarczy napisać nasz kod 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>

Teraz możesz uruchomić serwer i cieszyć się swoją pierwszą aplikacją wideo obsługiwaną przez Angular i Videogular.

 npm run start

Tworzenie listy odtwarzania multimediów w Angular

Aby wyświetlić listę naszych filmów, utworzymy prostą tablicę ze wszystkimi opcjami. Pamiętaj tylko, że możesz załadować tę listę za pośrednictwem usługi REST z HttpModule Angulara, ale dla uproszczenia zrobimy to na stałe w tym demo.

Otwórz app.component.ts i dodaj tę tablicę filmów i jej interfejs:

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

Teraz jesteśmy gotowi do dodania listy odtwarzania poniżej naszego odtwarzacza w pliku HTML:

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

Dodajmy kilka stylów dla selected klasy i efekt 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 ustawi media do odtwarzania w naszym odtwarzaczu Videogular. Przejdźmy teraz do app.component.ts , aby dodać metodę:

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

Właściwość currentIndex zostanie później użyta do zidentyfikowania bieżącego elementu i jego pozycji na liście odtwarzania. Jest to ważne, aby tworzyć listy odtwarzania w nieskończonej pętli i aktualizować currentIndex , gdy użytkownik kliknie element listy odtwarzania.

Na koniec musimy tylko zmodyfikować element video , aby ustawić źródło z właściwości currentItem obsługiwanej przez listę odtwarzania. Stworzymy w tym celu proste powiązanie z właściwością src elementu wideo HTML5:

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

Teraz możemy przetestować naszą playlistę i zobaczyć, jak działa. Pierwszy film jest ładowany na początku i możemy przełączać się między filmami, więc wszystko jest w porządku! Możemy jednak wprowadzić pewne poprawki i poprawić wrażenia, automatycznie przełączając się między filmami po ukończeniu filmu i dodając lepsze ogólne zarządzanie stanem odtwarzacza.

Aby to zrobić, będziemy potrzebować API Videogular, globalnej usługi dostępnej w każdej instancji Videogular do obsługi stanu i nasłuchiwania zdarzeń.

Używanie VgAPI do obsługi stanów

Nasza playlista multimediów jest teraz w 100% funkcjonalna, ale możemy poprawić wrażenia użytkownika, automatycznie odtwarzając filmy po wybraniu nowego elementu lub po ukończeniu filmu.

Videogular udostępnia interfejs API do kontrolowania i nasłuchiwania zmian dla każdej instancji VgMedia w składniku VgPlayer . Właściwie wszystkie moduły Videogular są oparte na tym publicznym interfejsie API, więc możesz tworzyć własne moduły dla swoich klientów lub przyczyniać się do społeczności, udostępniając je jako open source.

Aby użyć interfejsu API Videogular, wystarczy nasłuchiwać zdarzenia onPlayerReady wywoływanego przez komponent VgPlayer:

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

Po zainicjowaniu odtwarzacza możesz zapisać interfejs API i zacząć nasłuchiwać zdarzeń wywoływanych przez tag video :

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

API Videogular jest oparte na RxJS, dzięki czemu możesz subscribe Observables i odpowiednio zareagować. Aby automatycznie odtwarzać filmy, musimy nasłuchiwać zdarzenia loadedmetadata .

Dodajmy nową Subscription , aby odtwarzać wideo po załadowaniu metadanych:

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

To było łatwe; po prostu odtwarzamy wideo za pośrednictwem VgAPI, gdy uruchomiony jest obserwowalny loadedMetadata .

Czy pamiętasz właściwość currentIndex ? Teraz nadszedł moment, aby go użyć, abyśmy mogli przejść do następnego filmu, gdy bieżący film jest gotowy:

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

Dzięki tej metodzie możemy obsłużyć, kiedy ended zdarzenie zostanie wywołane przez tag video , a następnie przejść do następnego filmu. Dodaliśmy również małą kontrolkę, aby wykonać nieskończoną pętlę, gdy dojdziemy do końca listy odtwarzania, ustawiając currentIndex = 0; więc możemy wrócić do pierwszej pozycji. Na koniec ustawiamy currentItem , który zaktualizuje nasze wiązania Angular w interfejsie użytkownika.

Jak widać, nie odtwarzamy tutaj wideo; to dlatego, że zajmujemy się tym za pomocą obserwowalnego loadedMetadata . Kiedy aktualizujemy currentItem wewnątrz nextVideo() , ładowane jest nowe wideo, które wyzwala obserwowalny loadedMetadata .

Dzięki temu nasz kod jest łatwiejszy do odczytania i trudniejszy do złamania! Obserwable są niesamowite, prawda?

Co dalej?

Stąd możemy dodać kilka kontrolek wideo HTML5, aby usunąć autoodtwarzanie lub nieskończoną pętlę, wstawić reklamy lub zsynchronizować informacje.

W tym demo po prostu zarysowaliśmy powierzchnię tego, co można zrobić z Videogular. API jest w stanie zarządzać kilkoma plikami multimedialnymi jednocześnie, mamy moduły do ​​przesyłania strumieniowego i reklam, a nawet możesz stworzyć odtwarzacz multimedialny do odtwarzania animacji, tras na mapie i wielu innych.

Videogular jest wydany na licencji MIT i jest projektem open-source dostępnym na GitHub. Każdy może utworzyć żądanie ściągnięcia, zgłosić problem, napisać dokumentację i wnieść wkład do społeczności.