使用 Videogular 構建 Angular 視頻播放器

根據在線流量統計，視頻正在接管網絡。 好的老式電視正在消亡，公司正在迅速佔領一個到 2019 年將佔在線流量 80% 的市場。

許多媒體提供商和產品都依賴 HTML5 視頻支持：

• Youtube： HTML5 視頻和社交分享平台
• Netflix： HTML5 視頻內容提供商
• JWPlayer： HTML5 視頻服務和流媒體提供商
• Brightcove： HTML5 視頻服務和流媒體提供商
• Kaltura： HTML5 視頻服務和流媒體提供商
• Video.js： HTML5 視頻播放器
• Flowplayer： HTML5 視頻播放器和流媒體提供商

開發者社區需要一個可靠的、可擴展的、先進的媒體框架（不僅僅是一個 HTML5 視頻播放器）來應對未來的新挑戰。 在本文中，我想介紹一個這樣的框架： Videogular 。

什麼是視頻？

顧名思義，Videogular 是一個用 Angular 2+ 編寫的媒體框架。 使用 Videogular，您可以播放 HTML5 視頻、音頻或任何其他您想要的內容。 Angular 1.X（又名 AngularJS）有一個實現，但在本文中，我們將只討論當前的 Angular 2+ 版本。

那麼，下一個可能會浮現在您腦海中的問題是：為什麼要使用 Angular 來製作視頻？

好吧，選擇特定框架來創建視頻庫有很多很好的理由。

• 易於貢獻：因為 Videogular 基於 Angular，這是一個擁有非常活躍的社區的流行框架，其他人很容易通過創建插件或修復錯誤來開始貢獻。
• Web 組件：無需編寫 JavaScript 即可創建和設置您自己的播放器樣式。 您可以編寫 HTML 和 CSS 代碼。
• TypeScript：Angular 是一個類型化框架，以及它周圍的所有庫。 擁有強類型生態系統使我們能夠在為時已晚之前檢測到錯誤和架構問題。
• 速度：所有最新流行的框架都在飛速發展，包括 Angular。

此外，我們還有一些其他很酷的功能，例如 RxJS、AOT（提前編譯）、Angular CLI 等等。

Videogular是如何工作的？

我喜歡說 Videogular 更像是一個媒體框架，而不僅僅是一個 HTML5 視頻播放器。 其他視頻播放器之間最相關的功能和區別是您編寫標籤來設置播放器而不是 JavaScript。

這是大多數視頻播放器現在的工作方式：

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

這就是 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>

Videogular 的好處在於，只需快速瀏覽一下 HTML 代碼，您就知道該播放器的工作原理、可用的控件以及如何修改它以刪除，例如，軌道和軌道選擇器。

但這並不是我們在構建 Angular 視頻播放器時可以從中受益的唯一優勢。 想想 HTML/CSS 設計人員和 JavaScript 開發人員在同一個代碼庫上一起工作的大型開發團隊。 因為我們使用的是自定義元素，所以設計師可以通過應用樣式和動畫來開始工作，而無需學習新的庫甚至 JavaScript/TypeScript。

此外，Videogular 提供了比編寫簡單的 Angular 視頻播放器更強大的功能，例如多個媒體文件之間的自動同步，或者不僅可以播放視頻/音頻，還可以播放幾乎任何有開頭和結尾的內容。

要了解使用 Videogular 創建豐富的交互式應用程序是多麼容易，我們將創建一個具有同步元數據的視頻播放列表。

如何安裝 Videogular

在這個例子中，我們將有一個視頻列表和一個來自維基百科的相關摘錄，以防用戶需要更多關於視頻的信息。

所有代碼都可以在我們的 Videogular Showroom GitHub 存儲庫中找到，並作為 GitHub 頁面發布。

對於任何熟練的 Angular 開發人員來說，Videogular 安裝應該是一件簡單的事情。 另一方面，如果你剛剛開始使用 Angular，你應該查看這個快速指南來製作你的第一個 Angular 應用程序。

如果你還沒有安裝 Node.js，去 Node.js 官網安裝。 這是我們需要使用 Angular 開發的唯一服務器，我們需要它通過 NPM 安裝依賴項。 您只需要確保安裝 Node.js 6.9.0 或更高版本以及 NPM 3.0.0 或更高版本。

我們需要做的第一件事是安裝 Angular CLI。 Angular CLI 是任何 Angular 開發人員必備的工具，因為它提供了簡單的腳手架、測試、開發服務器和產品構建。 更重要的是，它遵循任何其他 Angular 開發人員都可以理解的約定。

通過 NPM 全局安裝 Angular CLI：

 npm install -g @angular/cli

讓我們創建第一個支持 SASS 的項目：

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

這應該為您創建一個示例項目。 如果你想同時開始開發和觀察結果，你可以運行npm run start並打開[http://localhost:4200](http://localhost:4200) 。 Angular CLI 將運行一個 Node.js 開發服務器，該服務器具有實時重新加載和我們作為開發人員喜愛的所有很酷的功能。

現在您可以安裝videogular2庫和core-js類型：

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

創建 Angular 視頻播放器

如果您願意，您可以使用官方 Videogular 字體在您的按鈕和控件上設置圖標。 為此，您需要將 CSS 添加到項目根目錄中可用的.angular-cli.json文件中。

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

如果要設置自己的字體和样式，可以在此處或在styles.scss中設置自定義 CSS。

要在您的項目中開始使用 Videogular，您必須將 Videogular 模塊添加到您的應用程序模塊中。

打開src/app/app.module.ts並刪除 FormsModule 和 HttpModule； 這個演示我們不需要它們。 這就是你的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 { }

一切就緒後，我們只需要編寫 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>

現在您可以運行服務器並享受您的第一個由 Angular 和 Videogular 提供支持的視頻應用程序。

 npm run start

在 Angular 中構建媒體播放列表

為了列出我們的視頻，我們將創建一個包含所有選項的簡單數組。 請記住，您可以使用 Angular 的 HttpModule 通過 REST 服務加載此列表，但為了簡單起見，我們將在此演示中進行硬編碼。

打開app.component.ts並添加這個視頻數組及其界面：

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

現在我們準備在 HTML 文件中添加播放器下方的播放列表：

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

讓我們為selected的類和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; } } }

onClickPlaylistItem方法將設置媒體在我們的 Videogular 播放器上播放。 現在讓我們去app.component.ts添加方法：

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

稍後將使用屬性currentIndex來標識當前項目及其在播放列表中的位置。 這對於執行無限循環播放列表並在用戶單擊播放列表的項目時更新currentIndex很重要。

最後，我們只需要修改video元素以從播放列表處理的currentItem屬性中設置來源。 我們將為此創建一個與 HTML5 視頻元素的src屬性的簡單綁定：

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

現在我們可以測試我們的播放列表，看看它是如何工作的。 第一個視頻在開頭加載，我們可以在視頻之間切換，所以一切都很好！ 但是我們可以通過在視頻完成後自動切換視頻來進行一些調整併改善體驗，並添加更好的播放器狀態整體管理。

為此，我們需要 Videogular API，這是一個在每個 Videogular 實例上都可用的全局服務，用於處理狀態和監聽事件。

使用 VgAPI 處理狀態

我們的媒體播放列表現在 100% 正常運行，但我們可以通過在選擇新項目或完成視頻時自動播放視頻來改善用戶體驗。

Videogular 公開了一個 API 來控制和偵聽VgPlayer組件內每個VgMedia實例的更改。 實際上，所有 Videogular 模塊都基於這個公共 API，因此您可以為您的客戶創建自己的模塊或通過將它們作為開源發布來為社區做出貢獻。

要使用 Videogular API，您只需要監聽 VgPlayer 組件觸發的onPlayerReady事件：

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

初始化播放器後，您可以保存 API 並開始監聽video標籤調度的事件：

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

Videogular API 基於 RxJS，因此您可以subscribe Observables並做出相應的反應。 要自動播放視頻，我們需要監聽loadedmetadata事件。

讓我們添加一個新的Subscription以在加載元數據時播放視頻：

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

那很簡單; 當loadedMetadata可觀察對像被觸發時，我們只需通過 VgAPI 播放視頻。

你還記得currentIndex屬性嗎？ 現在是使用它的時候了，這樣我們就可以在當前視頻完成後轉到下一個視頻：

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

使用此方法，我們可以處理video標籤觸發ended事件的時間，然後移動到下一個視頻。 我們還添加了一個小控件，當我們通過設置currentIndex = 0; 所以我們可以回到第一個項目。 最後，我們設置currentItem來更新 UI 中的 Angular 綁定。

如您所見，我們不是在此處播放視頻； 那是因為我們使用加載的loadedMetadata observable 來處理它。 當我們更新nextVideo()中的currentItem時，會加載一個新視頻並觸發loadedMetadata可觀察對象。

這使我們的代碼更容易閱讀，更難破解！ Observables 很棒吧？

下一步是什麼？

從這裡，我們可以添加一些 HTML5 視頻控件來移除自動播放或無限循環、注入廣告或同步信息。

在這個演示中，我們只是觸及了使用 Videogular 可以做的事情的皮毛。 該 API 能夠同時管理多個媒體文件，我們有流媒體和廣告模塊，您甚至可以創建一個媒體播放器來播放動畫、地圖中的路線等等。

Videogular 是在 MIT 許可下發布的，是 GitHub 上的一個開源項目。 歡迎每個人創建拉取請求、提交問題、編寫文檔並為社區做出貢獻。