ishikawa@tam-tam.co.jp' ishikawa

YouTube Player APIを使って色々やってみる

ページに埋め込んだYouTubeをJavaScriptで制御する機会が何度かあったので、
YouTube Player API の使い方をまとめてみます。

今回使用するのは、以下のIFrame API になります。
iframe 組み込みの YouTube Player API リファレンス - YouTube - Google Developers

■目次

  1. 基本的な埋め込み
  2. JavaScriptでの操作
  3. プレーヤーの状態に応じて処理をする
  4. プレーヤーの準備ができてからJavaScriptでの操作を行う
  5. パラメータを設定する

基本的な埋め込み

まずはYouTubeプレーヤーをページに埋め込んでみます。

1.YouTubeを埋め込む場所を指定

■HTML

1
<div id="sample"></div>

※id="sample"内にYouTube(iframe)が埋め込まれるのではなく、#sampleがiframeに置換されます。

2.jsファイルの読み込み

</body>の直前にjsファイルを読み込ませます。

■HTML

1
<script src="sample.js"></script>

HTML内に直接JavaScriptを記述しても問題ないですが、今回はこのsample.js内に必要な記述を追加します。

3.IFrame Player API の読み込み

sample.js内にIFrame Player APIを読み込む記述を追加します。

■JavaScript

1
2
3
4
5
// IFrame Player API の読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

4.YouTubeの埋め込み

sample.js内にYouTubeプレーヤーを埋め込む記述を追加します。

■JavaScript

1
2
3
4
5
6
7
8
9
10
11
// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player(
       'sample', // 埋め込む場所の指定
        {
           width: 640, // プレーヤーの幅
          height: 390, // プレーヤーの高さ
            videoId: 'bHQqvYy5KYo' // YouTubeのID
      }
   );
}

これでYouTubeの埋め込みが完了しました。
以下でも使用していきますが、onYouTubeIframeAPIReady関数内で指定している
「ytPlayer」に対して処理を記述することで、プレーヤーに対する処理を行えます。

ソースコードの一式はサンプルページをご確認ください。

JavaScriptでの操作

JavaScriptでYouTubeの再生や一時停止、シークバーの移動、音量調整などを操作してみます。

1.jQueryの読み込み

記述を簡易にするため、jQueryを読み込んで使用します。

■HTML

2.ボタンの設置

再生や一時停止など、イベント用のボタンを設置します。

■HTML

1
2
3
4
5
6
7
<button id="play">再生</button>
<button id="pause">一時停止</button>
<button id="prev">1分前へ</button>
<button id="next">1分先へ</button>
<button id="volup">音量アップ</button>
<button id="voldown">音量ダウン</button>
<button id="mute">ミュート</button>

3.各ボタンに処理を追加

各ボタンをクリックしたときの処理を追加します。

■JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$(function() {
  // 再生
   $('#play').click(function() {
     ytPlayer.playVideo();
   });
 // 一時停止
 $('#pause').click(function() {
        ytPlayer.pauseVideo();
  });
 // 1分前へ
 $('#prev').click(function() {
     // 現在の再生時間取得
        var currentTime = ytPlayer.getCurrentTime();
        // シークバーの移動
     ytPlayer.seekTo(currentTime - 60);
  });
 // 1分先へ
 $('#next').click(function() {
     // 現在の再生時間取得
        var currentTime = ytPlayer.getCurrentTime();
        // シークバーの移動
     ytPlayer.seekTo(currentTime + 60);
  });
 // 音量アップ(+10)
   $('#volup').click(function() {
        // 現在の音量取得
      var currentVol = ytPlayer.getVolume();
      ytPlayer.setVolume(currentVol + 10);
    });
 // 音量ダウン(-10)
   $('#voldown').click(function() {
      // 現在の音量取得
      var currentVol = ytPlayer.getVolume();
      ytPlayer.setVolume(currentVol - 10);
    });
 // ミュート
 $('#mute').click(function() {
     // ミュートされているかどうか
        if(ytPlayer.isMuted()) {
            // ミュートの解除
          ytPlayer.unMute();
      } else {
            // ミュート
         ytPlayer.mute();
        }
   });
});

サンプルページ2

※プレーヤーの準備ができる前にボタンをクリックするとエラーが出るので、正しくはその対応が必要になります。 詳しくは、プレーヤーの準備ができてからJavaScriptでの操作を行うの項目で記載しています。

プレーヤーの状態に応じて処理をする

埋め込んでいるプレーヤーの状態に応じて処理を行ってみます。

今回はプレーヤーの準備ができたときに動画を自動再生、
プレーヤーの状態が変更されたときにconsole.logで通知、再生終了したときに最初から再生させてみます。

1.プレーヤーの準備ができたときの処理

プレーヤーの準備ができたときに実行する関数を準備します。

■JavaScript

1
2
3
4
5
// プレーヤーの準備ができたとき
function onPlayerReady(event) {
   // 動画再生
 event.target.playVideo();
}

2.プレーヤーの状態が変更されたときの処理

プレーヤーの状態が変更されたときに実行する関数を準備します。

■JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// プレーヤーの状態が変更されたとき
function onPlayerStateChange(event) {
   // 現在のプレーヤーの状態を取得
   var ytStatus = event.data;
  // 再生終了したとき
 if (ytStatus == YT.PlayerState.ENDED) {
     console.log('再生終了');
      // 動画再生
     event.target.playVideo();
   }
   // 再生中のとき
   if (ytStatus == YT.PlayerState.PLAYING) {
       console.log('再生中');
   }
   // 停止中のとき
   if (ytStatus == YT.PlayerState.PAUSED) {
        console.log('停止中');
   }
   // バッファリング中のとき
  if (ytStatus == YT.PlayerState.BUFFERING) {
     console.log('バッファリング中');
  }
   // 頭出し済みのとき
 if (ytStatus == YT.PlayerState.CUED) {
      console.log('頭出し済み');
 }
}

3.YouTubeを埋め込むときにイベントを追加

■JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
   ytPlayer = new YT.Player(
       'sample', // 埋め込む場所の指定
        {
           width: 640, // プレーヤーの幅
          height: 390, // プレーヤーの高さ
            videoId: 'bHQqvYy5KYo', // YouTubeのID
         // イベントの設定
          events: {
               'onReady': onPlayerReady, // プレーヤーの準備ができたときに実行
                'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
           }
       }
   );
}

これで、プレーヤーの準備ができたときにonPlayerReady関数が、
プレーヤーの状態が変更されたときにonPlayerStateChange関数が実行されます。
サンプルページ3

プレーヤーの準備ができてからJavaScriptでの操作を行う

JavaScriptでの操作の項目でも記載しましたが、プレーヤーの準備ができる前に
プレーヤーの操作を行うとエラーが出てしまうので、場合によってはその対応が必要になります。

ここでは、先ほど作成したJavaScriptでの操作の項目のサンプルに対応を追加してみます。

1.プレーヤーの準備ができたときの処理

プレーヤーの準備ができたかどうか判別するために、playerReadyという変数を用意します。

■JavaScript

1
2
3
4
5
var playerReady = false;
// プレーヤーの準備ができたとき
function onPlayerReady(event) {
  playerReady = true;
}

プレーヤーの準備ができていない場合はplayerReadyがfalseに、準備できている場合はtrueになります。

2.YouTubeを埋め込むときにイベントを追加

■JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
   ytPlayer = new YT.Player(
       'sample', // 埋め込む場所の指定
        {
           width: 640, // プレーヤーの幅
          height: 390, // プレーヤーの高さ
            videoId: 'bHQqvYy5KYo', // YouTubeのID
         // イベントの設定
          events: {
               'onReady': onPlayerReady // プレーヤーの準備ができたときに実行
         }
       }
   );
}

3.各ボタンに処理を追加

各ボタンをクリックしたときに、playerReadyがtrueのときだけ処理を行うようにします。

■JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
$(function() {
   // 再生
   $('#play').click(function() {
     // playerReadyがtrueのときだけ実行
      if(playerReady) {
           ytPlayer.playVideo();
       }
   });
 // 一時停止
 $('#pause').click(function() {
        // playerReadyがtrueのときだけ実行
      if(playerReady) {
           ytPlayer.pauseVideo();
      }
   });
 // 1分前へ
 $('#prev').click(function() {
     // playerReadyがtrueのときだけ実行
      if(playerReady) {
           // 現在の再生時間取得
            var currentTime = ytPlayer.getCurrentTime();
            // シークバーの移動
         ytPlayer.seekTo(currentTime - 60);
      }
   });
 // 1分先へ
 $('#next').click(function() {
     // playerReadyがtrueのときだけ実行
      if(playerReady) {
           // 現在の再生時間取得
            var currentTime = ytPlayer.getCurrentTime();
            // シークバーの移動
         ytPlayer.seekTo(currentTime + 60);
      }
   });
 // 音量アップ(+10)
   $('#volup').click(function() {
        // playerReadyがtrueのときだけ実行
      if(playerReady) {
           // 現在の音量取得
          var currentVol = ytPlayer.getVolume();
          // 音量の変更
            ytPlayer.setVolume(currentVol + 10);
        }
   });
 // 音量ダウン(-10)
   $('#voldown').click(function() {
      // playerReadyがtrueのときだけ実行
      if(playerReady) {
           // 現在の音量取得
          var currentVol = ytPlayer.getVolume();
          // 音量の変更
            ytPlayer.setVolume(currentVol - 10);
        }
   });
 // ミュート
 $('#mute').click(function() {
     // playerReadyがtrueのときだけ実行
      if(playerReady) {
           // ミュートされているかどうか
            if(ytPlayer.isMuted()) {
                // ミュートの解除
              ytPlayer.unMute();
          } else {
                // ミュート
             ytPlayer.mute();
            }
       }
   });
});

これで、プレーヤーの準備ができる前にプレーヤーの操作を行わないようになりました。
サンプルページ4

パラメータを設定する

パラメータとは、YouTubeの動画ページで埋め込みコードを取得する際に設定できる項目のことです。

150408_img

パラメータを設定することで、プレーヤーの設定を色々とカスタマイズする事ができます。
動画ページの埋め込みコードでは4種類しかありませんが、これ以外にも種類が色々ありますので
設定方法と合わせて紹介します。

1.パラメータの設定

例として、関連動画の非表示、動画の自動再生のパラメータを設定してみます。

■JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
   ytPlayer = new YT.Player(
       'sample', // 埋め込む場所の指定
        {
           width: 640, // プレーヤーの幅
          height: 390, // プレーヤーの高さ
            videoId: 'bHQqvYy5KYo', // YouTubeのID
         // パラメータの設定
         playerVars: {
               rel: 0, // 再生終了後に関連動画を表示するかどうか設定
                autoplay: 1 // 自動再生するかどうか設定
         }
       }
   );
}

サンプルページ5
YouTube読み込み後に自動再生され、再生完了後に関連動画が表示されなくなりました。

2.パラメータの種類

パラメータにどんな種類があるかを見てみます。
ここでは一部しか記載していませんので、詳しくは以下をご確認ください。
YouTube 埋め込みプレーヤーとプレーヤーのパラメータ - YouTube — Google Developers

■autoplay

自動再生するかどうか設定。

  • autoplay: 0 自動再生しない(デフォルト)
  • autoplay: 1 自動再生する
■controls

コントロールバーを表示の設定。

  • controls: 0 コントロールバー非表示
  • controls: 1 コントロールバー表示(デフォルト)
  • controls: 2 動画再生後にコントロールバー表示
■end

指定した秒数を経過したときに動画を停止。 値は正の整数。

■listType

プレーヤーに読み込むコンテンツを識別するときに、listパラメータと合わせて使用。

  • listType: playlist 再生リストを表示
  • listType: search list パラメータで指定した文字列で検索を行い、その動画を再生リストとして表示
  • listType: user_uploads YouTubeチャンネルを表示
■list

プレーヤーに読み込むコンテンツを識別するときに、listTypeパラメータと合わせて使用。

  • list: playlistのとき、listには再生リストIDを指定
  • list: search listのとき、listには検索する文字列を指定
  • list: user_uploadsのとき、listにはYouTubeチャンネルを指定
■loop

動画を繰り返し再生するかどうか設定。

  • loop: 0 繰り返し再生されない(デフォルト)
  • loop: 1 繰り返し再生される

単一の動画の場合、同じ動画IDをplaylistパラメータの値に設定する必要があります。

■playlist

最初の動画再生後、指定した動画を順番に再生。 値は再生する動画IDをカンマで区切ったリスト。

■rel

再生終了後に関連動画を表示するかどうか設定。

  • rel: 0 表示しない
  • rel: 1 表示する(デフォルト)
■showinfo

動画再生前にタイトルなどを表示するかどうか設定。

  • showinfo: 0 表示しない
  • showinfo: 1 表示する(デフォルト)
■start

指定した秒数から動画を再生。 値は正の整数。

■wmode

プレーヤー(Flash)の重なり具合を変更。 IEでプレーヤーの上に要素を重ねるときに指定することが多いです。

  • wmode: transparent プレーヤーを背面に表示する

※iFrameでYouTubeを埋め込む場合はHTML5プレーヤーかAS3プレーヤーを読み込みますが、 プレーヤーによってサポートしていないパラメータもあるようです。

追記:
実際に使用するときに便利そうなtipsをまとめた記事を公開しました。

YouTube Player APIを使う時のtips集

【参考サイト】

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら

Recommend

DOM Breakpointsを利用した便利なデバッグ方法

jQuery.Deferredを使って、非同期処理がしっかり終わってから別の処理を与える！
CSSやJavaScriptで画像の保存を防止する方法4種類

CSSやJavaScriptで画像の保存を防止する方法4種類
VimeoのPlayer APIを使ってプレーヤーを操作する

VimeoのPlayer APIを使ってプレーヤーを操作する