AngularでyoutubeAPI（Iflame Player API）を使ってyoutube動画を埋め込み表示する。

• facebook

オフィス狛 技術部のHammarです。

いろんなサイトでyoutube動画が見れるように工夫しているところが多いですが、今回はAngularでyoutubeAPI（Iflame Player API）を利用して、サイトにyoutube動画を埋め込み表示する方法を書いてみたいと思います。

■実装環境

・Angular
・ngx-youtube-playerモジュールを利用

今回使用するngx-youtube-playerモジュールはインストール済みとします。
まずモジュールのimportを記述します。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { YoutubePlayerModule } from 'ngx-youtube-player';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app';

@NgModule({
  imports: [BrowserModule, YoutubePlayerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

次にyoutubeを埋め込みたい画面のファイルに下記のように記述します。
このあたりの記述はnpmjs.comのサンプルの記載とほぼ同じ感じです。

import { Component } from '@angular/core';
@Component(
  selector: 'app',
  template: `
        <youtube-player
      [videoId]="id"
      (ready)="savePlayer($event)"
      (change)="onStateChange($event)"
    ></youtube-player>
    `
})

export class AppComponent {
  player: YT.Player;
  private id: string = 'qDuKsiwS5xw';

  savePlayer(player) {
    this.player = player;
  }
}

これで基本的な下準備は完了で、

private id: string = 'qDuKsiwS5xw';

の部分で対象動画のyoutubeのidをセットすれば動画の埋め込みは完了です。
すごく簡単ですね！

で、カスタマイズも結構簡単にできますので、いくつか紹介したいと思います。

■動画が完了したタイミングで何か処理をする 

上記のcomponent.tsファイルに

  onStateChange(event) {
    if (event.data === 0) {
        // 動画終了してからの処理
    }
  }

のように追記して動画終了してから自動で何か処理をさせることもできます。
動画のステータスは
で判定することができますので、ステータスが変わったタイミングでなにかの処理を入れたりすることができます。

■プレイヤーのコントロールを別ボタンでやる

たとえば動画の再生や停止をyoutube内部のコントローラーではなく、プレイヤー外部にボタンを新たに設定してそこで制御したい場合などは下記のように追記するだけで実装可能です。
まずhtml側に下記のようなボタンを作成しておきます。

<button (click)="playVideo()" ><p>再生</p></button>

component.tsファイルに下記関数を設定します。

// 再生ボタン
playVideo() {
    this.player.playVideo();
}

これだけで制御が可能になります。
上記の要領で停止や音量の変更、ミュートやシークも簡単に制御ができます。

■動画終了後の表示のカスタマイズ

動画が終了すると関連の動画も勝手に表示されたりして、表示動画とは全く違うジャンルの動画リスト等もデフォルトで表示され、サイトによっては余計な情報も表示されてしまうので、この表示をいくつか消したいときがあると思います。
このあたりの表示内容についてもカスタマイズ可能です。
動画終了後の関連動画を非表示にする場合、component.tsファイルのtemplate部分を下記のように記述します。

@Component({
  selector: 'app',
  template: `
        <youtube-player
      [videoId]="id"
      (ready)="savePlayer($event)"
      (change)="onStateChange($event)"
      [playerVars]="{'rel': 0}"
    ></youtube-player>
    `
})

上記の[playerVars]="{'rel': 0}"という記述が関連動画を非表示にするパラメータになります。
上記以外にも、動画の再生が始まる前に動画のタイトルやアップロードしたユーザーなどの情報カスタマイズや、動画のプレーヤーコントロールを表示するかどうかを指定したりすることができます。

上記で紹介したのはほんの一部で、下記公式サイトにいろいろなカスタマイズのリファレンスやプレイヤーパラメータの詳細が載っていますので、ぜひ参考にしてみてください。

・Iflame Player APIリファレンス
https://developers.google.com/youtube/iframe_api_reference?hl=ja#Playback_controls
・youtubeプレイヤーパラメータ
https://developers.google.com/youtube/player_parameters?playerVersion=HTML5&hl=ja

Angular , Youtube