あなたのキモチ つなげるカタチ

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

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

スポンサーリンク

この記事は2016年7月31日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

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の基本的な記述ルールを理解していることが前提条件となります。
コーディング歴が浅い人にとってはネックになってしまうかもしれませんが、フォーマットになりそうな定型文はググればたくさんヒットするので何とかなるでしょう。

実務で作成した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

スポンサーリンク