(cache)YouTube Player APIの使い方 – 複数の動画を連続して読み込ませる

YouTubeのアカウントに紐付いたプレイリストを読み込ませなくても、複数の動画IDを指定することで今回だけのプレイリストを使うことができます

プレイヤーを準備する部分でプレイリストと指定して動画IDを記入するだけです

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    playerVars: {
      'playlist': 'ZxnRp4p9SGk,ipzpFV4ddTQ'
    },
    height: '315',
    width: '560',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

var player;

function onYouTubeIframeAPIReady() {

player = new YT.Player('player', {

playerVars: {

'playlist': 'ZxnRp4p9SGk,ipzpFV4ddTQ'

height: '315',

width: '560',

events: {

'onReady': onPlayerReady,

'onStateChange': onPlayerStateChange

}

});

}

１つ目の動画の再生が終了すると２つ目の動画が再生され始めます
50個までは指定が可能ですので連続されている動画を順番にセットするには十分かと思います

状態表示：

JavaScript全体は下記のようになります

//IFrame Player API用のJavaScriptを呼び込んで、ページの&lt;script&gt;タグとして埋め込みます
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//上記のJavaScriptの読み込みが完了すると実行され、再生用のプレイヤーが準備されます
//ここでは、高さ315px、幅560pxでvideoIdがZxnRp4p9SGkの動画をセットするようになっています
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    playerVars: {
      'playlist': 'ZxnRp4p9SGk,ipzpFV4ddTQ'
    },
    height: '315',
    width: '560',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

//上記の記述でプレイヤーの準備が整うと実行されます
//ここでは、プレイヤーの準備が整えば再生を開始するようになっています
function onPlayerReady(event) {
//  event.target.playVideo();
//  event.target.seekTo(60);
}


//再生される・されている動画の情報を取得してプレイヤーサイズを調整する
function onPlayerStateChange(event) {
  var status = event.data;

  var names = {
    '-1' : '未開始',
    '0' : '終了',
    '1' : '再生中',
    '2' : '停止',
    '3' : 'バッファリング中',
    '5' : '頭出し済み'
    };

  //プレイやの現在の状態を取得
  var PalyStatus = names[status];
  
  var targetId = document.getElementById("video_status");
  targetId.innerHTML = PalyStatus;
  
  //ステータスコードによって処理をかける(文字色を変更する)
  if (status == 1) {
    //再生中の処理
    targetId.style.color = "#FF0000";
  }else if (status == 2) {
    //停止された時の処理
    targetId.style.color = "#000000";
  }else if (status == 3) {
    //バッファリング中の処理
    targetId.style.color = "#0000FF";
  }else if (status == 0) {
    //再生が終了した時の処理
    targetId.style.color = "#FFFF00";
  }
}

//IFrame Player API用のJavaScriptを呼び込んで、ページの<script>タグとして埋め込みます

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//上記のJavaScriptの読み込みが完了すると実行され、再生用のプレイヤーが準備されます

//ここでは、高さ315px、幅560pxでvideoIdがZxnRp4p9SGkの動画をセットするようになっています

var player;

function onYouTubeIframeAPIReady() {

player = new YT.Player('player', {

playerVars: {

'playlist': 'ZxnRp4p9SGk,ipzpFV4ddTQ'

height: '315',

width: '560',

events: {

'onReady': onPlayerReady,

'onStateChange': onPlayerStateChange

}

});

}

//上記の記述でプレイヤーの準備が整うと実行されます

//ここでは、プレイヤーの準備が整えば再生を開始するようになっています

function onPlayerReady(event) {

// event.target.playVideo();

// event.target.seekTo(60);

}

//再生される・されている動画の情報を取得してプレイヤーサイズを調整する

function onPlayerStateChange(event) {

var status = event.data;

var names = {

'-1' : '未開始',

'0' : '終了',

'1' : '再生中',

'2' : '停止',

'3' : 'バッファリング中',

'5' : '頭出し済み'

};

//プレイやの現在の状態を取得

var PalyStatus = names[status];

var targetId = document.getElementById("video_status");

targetId.innerHTML = PalyStatus;

//ステータスコードによって処理をかける(文字色を変更する)

if (status == 1) {

//再生中の処理

targetId.style.color = "#FF0000";

}else if (status == 2) {

//停止された時の処理

targetId.style.color = "#000000";

}else if (status == 3) {

//バッファリング中の処理

targetId.style.color = "#0000FF";

}else if (status == 0) {

//再生が終了した時の処理

targetId.style.color = "#FFFF00";

}

複数の動画をプレイリストへセットできるようになったところで問題が１つ見つかってきます
『前後の動画に任意で移動したときはどうするの？』

YouTubeプレイヤーの左上にあるハンバーガーっぽいものをクリックするとリストが表示され、そのリストをクリックすれば目的の動画に移動は可能ですが
せっかくならば
・再生
・停止(一時停止)
・早送り
・巻き戻し
・次へ
・前へ
ぐらいの操作ができるようになりたいものですよね
次回は、動作を制御する篇です

全工程

はてブ！

Pocket

google+

日々成長

立派な紳士になるために・・・

YouTube Player APIの使い方 – 複数の動画を連続して読み込ませる

全工程