バックエンド

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

Videogularプロジェクトは、ApeeScapeオープンソース助成金によってサポートされています。 ApeeScape Open Source Grantsは、オープンソースプロジェクトを推進するApeeScapeネットワークのメンバーをサポートしています。

Raul Jimenez Herrandoは、最初のオープンソース助成金受領者の1人として、新機能の追加、バグの修正、Videogularプロジェクトのドキュメントの作成を行っています。 ApeeScapeオープンソース助成金の詳細については、メールでお問い合わせください [メール保護]

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

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

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

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

Videogularとは何ですか？

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

だから、おそらくあなたの心を横切っている次の質問は次のとおりです： ビデオにAngularを使用する理由

表紙のイラスト：Angularビデオプレーヤーの構築

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

c ++ファイルをコンパイルする

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

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

Videogularはどのように機能しますか？

Videogularは、単なるHTML5ビデオプレーヤーというよりも、メディアフレームワークであると言いたいです。他のビデオプレーヤーとの最も関連性のある機能と違いは、JavaScriptの代わりにプレーヤーを設定するためのタグを作成することです。

これは、ほとんどのビデオプレーヤーが現在どのように機能するかです。

npm install -g @angular/cli

そして、これはVideogularの実装がどのように見えるかです：

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

Videogularの良いところは、HTMLコードをざっと見るだけで、このプレーヤーがどのように機能するか、どのコントロールを使用できるか、トラックやトラックセレクターなどを削除するように変更する方法がわかることです。

しかし、Angularビデオプレーヤーを構築するときに恩恵を受けることができる利点はこれだけではありません。 HTML / CSSデザイナーとJavaScript開発者が同じコードベースで協力する大規模な開発チームについて考えてみてください。カスタム要素を使用しているため、デザイナーは、新しいライブラリやJavaScript / TypeScriptを習得しなくても、スタイルやアニメーションを適用して作業を開始できます。

ノードjsのメモリ使用量を監視する

また、Videogularは、複数のメディアファイル間の自動同期や、ビデオ/オーディオだけでなく、開始と終了のあるほぼすべてのコンテンツを再生する機能など、単純なAngularビデオプレーヤーを作成するよりもはるかに強力な機能を提供します。

Videogularを使用してリッチでインタラクティブなアプリを簡単に作成できることを確認するために、同期されたメタデータを使用して動画再生リストを作成します。

Videogularをインストールする方法

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

すべてのコードは私たちので利用可能です Videogular ShowroomGitHubリポジトリそしてそれはとして公開されています GitHubページ。

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

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

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

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

npm run start

そして、SASSをサポートする最初のプロジェクトを作成しましょう。

[http://localhost:4200](http://localhost:4200)

これにより、サンプルプロジェクトが作成されます。開発と結果の監視を同時に開始したい場合は、videogular2を実行できます。 core-jsを開きます。 Angular CLIは、ライブリロードと開発者が愛するすべての優れた機能を備えたNode.js開発サーバーを実行します。

これで、npm install videogular2 --save npm install @types/core-js --save-dev をインストールできますライブラリと.angular-cli.jsonタイピング：

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

Angularビデオプレーヤーの作成

必要に応じて、公式のVideogularフォントを使用して、ボタンやコントロールにアイコンを設定できます。これを行うには、CSSをstyles.scssに追加する必要がありますプロジェクトのルートで利用可能なファイル。

src/app/app.module.ts

独自のフォントとスタイルを設定する場合は、ここまたはapp.module.ts内でカスタムCSSを設定できます。

s corp vs c corp llc

プロジェクトでVideogularの使用を開始するには、Videogularモジュールをアプリケーションモジュールに追加する必要があります。

開く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 { } FormsModuleとHttpModuleを削除します。このデモでは必要ありません。これがあなたのnpm run start の方法ですファイルは次のようになります。

app.component.ts

すべての設定が完了したら、HTMLコードを記述するだけです。

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

これで、サーバーを実行して、AngularとVideogularを搭載した最初のビデオアプリを楽しむことができます。

  {{ item.title }}

Angularでのメディアプレイリストの構築

ビデオを一覧表示するために、すべてのオプションを含む単純な配列を作成します。このリストはAngularのHttpModuleを使用してRESTサービスを介してロードできることを覚えておいてください。ただし、簡単にするために、このデモではこれをハードコーディングします。

開くselectedそして、この一連のビデオとそのインターフェースを追加します。

hover

これで、HTMLファイルのプレーヤーの下にプレイリストを追加する準備が整いました。

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にいくつかのスタイルを追加しましょうクラスとapp.component.ts効果：

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

メソッドcurrentIndex Videogularプレーヤーで再生するようにメディアを設定します。では、currentIndexに行きましょう。メソッドを追加するには：

video

プロパティcurrentItem後でプレイリスト内の現在のアイテムとその位置を識別するために使用されます。これは、無限ループのプレイリストを作成し、srcを更新するために重要です。ユーザーがプレイリストのアイテムをクリックしたとき。

最後に、VgMediaを変更するだけです。 VgPlayerからソースを設定する要素プレイリストによって処理されるプロパティ。このために、onPlayerReadyへの単純なバインディングを作成します。 HTML5ビデオ要素のプロパティ：

// ...

これで、プレイリストをテストして、どのように機能するかを確認できます。最初の動画は最初に読み込まれ、動画を切り替えることができるので、すべて問題ありません。ただし、ビデオが完成したときにビデオを自動的に切り替え、プレーヤーの状態の全体的な管理を改善することで、いくつかの調整を行い、エクスペリエンスを向上させることができます。

視覚のゲシュタルト原理

これを行うには、Videogular APIが必要になります。これは、すべてのVideogularインスタンスで利用可能なグローバルサービスであり、状態を処理してイベントをリッスンします。

VgAPIを使用して状態を処理する

現在、メディアプレイリストは100％機能していますが、新しいアイテムが選択されたとき、またはビデオが完成したときにビデオを自動再生することで、ユーザーエクスペリエンスを向上させることができます。

Videogularは、各videoの変更を制御およびリッスンするAPIを公開しています。 export class AppComponent { // ... onPlayerReady(api: VgAPI) { this.api = api; } } 内のインスタンス成分。実際、すべてのVideogularモジュールはこのパブリックAPIに基づいているため、顧客向けに独自のモジュールを作成したり、オープンソースとしてリリースすることでコミュニティに貢献したりできます。

Videogular APIを使用するには、subscribeをリッスンする必要があります。 VgPlayerコンポーネントによって発生したイベント：

Observables

プレーヤーが初期化されると、APIを保存して、loadedmetadataによってディスパッチされたイベントのリッスンを開始できます。鬼ごっこ：

Subscription

Videogular APIはRxJSに基づいているため、export class AppComponent { // ... onPlayerReady(api: VgAPI) { this.api = api; this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe( this.playVideo.bind(this) ); } playVideo() { this.api.play(); } // ... } が可能です。〜loadedMetadata結果として反応します。ビデオを自動再生するには、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の場合、VgAPIを介してビデオを再生するだけです。 observableが解雇されます。

currentIndex = 0;を覚えていますかプロパティ？現在のビデオが完成したときに次のビデオに移動できるように、今がそれを使用する瞬間です。

currentItem

この方法では、loadedMetadataの場合に処理できます。イベントはcurrentItemによって発生しますタグを付けてから、次のビデオに移動します。また、nextVideo()を設定して、プレイリストの最後に到達したときに無限ループを実行する小さなコントロールを追加しました。最初の項目に戻ることができます。最後にloadedMetadataを設定しますこれにより、UIのAngularバインディングが更新されます。

ご覧のとおり、ここではビデオを再生していません。それは

で処理するためです観察可能。

を更新するとき