Videogularを使用したAngularビデオプレーヤーの構築

オンライントラフィック統計によると、ビデオがWebの制御を引き継いでいます。 古き良きテレビは死につつあり、企業は2019年までにオンライントラフィックの80％を占める市場を支配するために急速に動いています。

多くのメディアプロバイダーと製品は、HTML5ビデオのサポートに依存しています。

• Youtube： HTML5ビデオおよびソーシャル共有プラットフォーム
• Netflix： HTML5ビデオコンテンツプロバイダー
• JWPlayer： HTML5ビデオサービスおよびストリーミングプロバイダー
• Brightcove： HTML5ビデオサービスおよびストリーミングプロバイダー
• Kaltura： HTML5ビデオサービスおよびストリーミングプロバイダー
• Video.js： HTML5ビデオプレーヤー
• Flowplayer： HTML5ビデオプレーヤーおよびストリーミングプロバイダー

開発者コミュニティは、今後の新たな課題に立ち向かうために、（HTML5ビデオプレーヤーだけでなく）堅固で拡張性のある高度なメディアフレームワークを必要としています。 この記事では、そのようなフレームワークの1つであるVideogularを紹介します。

Videogularとは何ですか？

名前が示すように、VideogularはAngular2+で記述されたメディアフレームワークです。 Videogularを使用すると、HTML5ビデオ、オーディオ、またはその他の必要なコンテンツを再生できます。 Angular 1.X（別名AngularJS）の実装がありますが、この記事では、現在のAngular2+バージョンについてのみ説明します。

それで、おそらくあなたの頭を悩ませている次の質問は、ビデオにAngularを使用する理由です。

ビデオライブラリを作成するために特定のフレームワークを選択する理由はたくさんあります。

• 貢献のしやすさ：Videogularは非常に活発なコミュニティで人気のあるフレームワークであるAngularに基づいているため、プラグインを作成したりバグを修正したりすることで、他の人が貢献を開始するのは非常に簡単です。
• Webコンポーネント：独自のプレーヤーを作成してスタイルを設定するためにJavaScriptを作成する必要はありません。 HTMLとCSSコードを書くことができます。
• TypeScript：Angularは型付きフレームワークであり、その周りのすべてのライブラリも同様です。 強く型付けされたエコシステムがあると、手遅れになる前にバグやアーキテクチャの問題を検出できます。
• 速度：Angularを含め、最新の人気のあるフレームワークはすべて高速です。

さらに、RxJS、AOT（事前コンパイル）、AngularCLIなどの他の優れた機能もあります。

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をインストールする方法

この例では、ユーザーがビデオに関する詳細情報を必要とする場合に備えて、ビデオのリストとウィキペディアからの関連する抜粋を示します。

すべてのコードはVideogularShowroomGitHubリポジトリで入手でき、GitHubページとして公開されています。

Videogularのインストールは、熟練したAngular開発者にとっては簡単なことです。 一方、Angularを使い始めたばかりの場合は、最初のAngularアプリを作成するためのこのクイックガイドを確認する必要があります。

Node.jsをまだインストールしていない場合は、Node.jsの公式Webサイトにアクセスしてインストールしてください。 これはAngularで開発する必要がある唯一のサーバーであり、NPMを介して依存関係をインストールするために必要です。 必ずNode.js6.9.0以降とNPM3.0.0以降をインストールする必要があります。

最初に行う必要があるのは、AngularCLIをインストールすることです。 Angular CLIは、簡単なスキャフォールディング、テスト、開発サーバー、およびプロダクションビルドを提供するため、Angular開発者にとって必須のツールです。 さらに重要なことは、他のAngular開発者が理解できる規則に従っていることです。

NPMを介してAngularCLIをグローバルにインストールします。

 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フォントを使用して、ボタンやコントロールにアイコンを設定できます。 これを行うには、プロジェクトのルートで利用可能な.angular-cli.jsonファイルにCSSを追加する必要があります。

 { ... "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は、 VgPlayerコンポーネント内の各VgMediaインスタンスの変更を制御およびリッスンするためのAPIを公開します。 実際、すべての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に基づいているため、 Observablesにsubscribeして、結果として反応することができます。 ビデオを自動再生するには、 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 observableが起動されたときに、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 ]; } // ... }

この方法では、 endedイベントがvideoタグによって発生したときに処理してから、次のビデオに移動できます。 また、 currentIndex = 0; 最初の項目に戻ることができます。 最後に、UIでAngularバインディングを更新するcurrentItemを設定します。

ご覧のとおり、ここではビデオを再生していません。 これは、 loadedMetadataで処理するためです。 nextVideo()内のcurrentItemを更新すると、新しいビデオがロードされ、 loadedMetadataがトリガーされます。

これにより、コードが読みやすくなり、壊れにくくなります。 オブザーバブルは素晴らしいですよね？

次は何ですか？

ここから、HTML5ビデオコントロールを追加して、自動再生や無限ループを削除したり、広告を挿入したり、情報を同期したりできます。

このデモでは、Videogularでできることのほんの一部を紹介しました。 APIは、同時に複数のメディアファイルを管理できます。ストリーミングと広告用のモジュールがあり、アニメーションや地図内のルートなどを再生するメディアプレーヤーを作成することもできます。

VideogularはMITライセンスの下でリリースされており、GitHubで利用できるオープンソースプロジェクトです。 プルリクエストの作成、問題の送信、ドキュメントの作成、コミュニティへの貢献は誰でも歓迎します。