【API】YouTube Player APIの実装まとめ

YouTube Player APIについて

「YouTube Player API」を使用すると埋め込んでいるプレーヤーの状態に応じて様々な処理を行うことができます。
例えば、「YouTubeを連続で再生させる」「再生○○秒後にパラメーターを付与する」といった処理を実現できます。基本的な実装手順は下記の記事が参考になります。
http://www.tam-tam.co.jp/tipsnote/javascript/post6217.html

実務で作成したYouTube Player API

実務では「動画を見終わったらバナーを出現させたい」という依頼に対応するために
YouTube Player APIを使用しました。
利用するにはGoogle Maps APIと同じく、JavaScriptの基本的な記述ルールを理解していることが前提条件となります。
コーディング歴が浅い人にとってはネックになってしまうかもしれませんが、フォーマットになりそうな定型文はググればたくさんヒットするので何とかなるでしょう。

>> DEMOはこちらから！

実務で作成したYouTube Player APIの解説

YouTube Playerに指示を出すためにスクリプト内に下記の記述をしています

• ・IFrame Player API の読み込み
• ・YouTubeの埋め込み
• ・プレーヤーの状態に応じた処理

■JavaScript

var movie_tag = true;

// 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);

// 再生ボタン用
var gaPlay = true;

function onPlayerReady(event){
   /* プレーヤの準備完了時 */
 ytPlayer.setPlaybackQuality('large');
}

function onPlayerStateChange(event) {
  // 現在のプレーヤーの状態を取得
  var iframeID = event.target.getIframe().id;
  var ytStatus = event.data;

  // 再生終了時の処理
  if (ytStatus == YT.PlayerState.ENDED) {
    $('.movie_btn').fadeIn('slow');
  }

    // 一時停止時の処理 ここ消せそう
    if (ytStatus == YT.PlayerState.PAUSED) {
        if(playTime){clearInterval( playTime );}
    }
}

// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player(
    'movie', // 埋め込む場所の指定
  {
    width: 800, // プレーヤーの幅
    height: 450, // プレーヤーの高さ
    videoId: 'KIViy7L_lo8',

    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
    },
    playerVars: {
      rel: 0, // 再生終了後に関連動画を表示するかどうか設定
      autoplay: 0 // 自動再生するかどうか設定
    }
  });
}

■CSS

.movie_btn {
	display: none;
	margin: 20px 0 0;
}

.movie_btn a {
	display: block;
	padding: 20px 40px;
	color: #fff;
	background: #000;
}

記述の中で、今回の目的である「動画を見終わったらバナーを出現させる」という処理に対応させているのは下記の部分になります。

// 再生終了時の処理
  if (ytStatus == YT.PlayerState.ENDED) {
    $('.movie_btn').fadeIn('slow');
  }

もし、動画の再生が終了したらdisplay: none;で非表示になっていたバナー（.movie_btn）が
jQueryのfadeIn()でフェードイン表示されるといった処理になります。

参考にさせていただいたページ
http://phpjavascriptroom.com/?t=strm&p=youtubeiframeplayerapi

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。