同一ページ内でYouTubeを複数設置したときに、同時再生をさせないようにする

同一ページ内でYouTubeプレーヤーを複数埋め込んだとき、
通常だと同時に再生することができてしまいます。

実装前のデモページ

今回はこれを回避する方法を考えてみました。

対応方法案

対応方法として、以下の3案を考えました。

1. YouTubeプレーヤーではなくサムネイルを設置するようにして、サムネイルをクリックしたら
   ライトボックスを表示して再生するようにする。
2. YouTubeプレーヤーの設置を一つだけにして、代わりにサムネイルを設置。
   サムネイルをクリックでYouTubeプレーヤーのURLが切り替わるようにする。
3. YouTubeプレーヤーをクリックして再生したときに、
   他に再生しているYouTubeプレーヤーがあったら停止させる。

今回はYouTubeプレーヤーを複数埋め込むことが決まっていたたので、3番目を実装してみました。
ただ、実装するのは3案どれでも問題なさそうなので、場合に応じて選択でいいと思います。

※2番目のサンプルを別記事で作成しました。
YouTube動画をサムネイルクリックで切り替える
　

サンプルコード

今回はYouTubeプレーヤーを操作する必要があるので、YouTube Player APIを使用しました。

同時再生回避のデモページ

HTML

<div id="player01"></div>
<div id="player02"></div>
<div id="player03"></div>
<div id="player04"></div>

JavaScript

// プレーヤーのサイズを指定
var ytWidth = 640;
var ytHeight = 390;

// 埋め込むyoutubeのIDと埋め込むエリアを指定
var ytData = [
	{
		id: 'S_ucMS7sxx8',
		area: 'player01'
	}, {
		id: 'aIRAOr8WbXY',
		area: 'player02'
	}, {
		id: 'RLZez82cp4w',
		area: 'player03'
	}, {
		id: 'ZZ2IkhhXAEo',
		area: 'player04'
	}
];

var ytPlayer = [];
var ytPlaying, ytStop, ytPlay;

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

// API読み込み後に、各エリアにプレーヤーを埋め込む
function onYouTubeIframeAPIReady() {
	for(var i = 0; i < ytData.length; i++) {
		ytPlayer[i] = new YT.Player(ytData[i]['area'], {
			height: ytHeight,
			width: ytWidth,
			videoId: ytData[i]['id'],
			events: {
				'onStateChange': onPlayerStateChange
			}
		});
	}
}

// プレーヤーの状態に変化があった時に実行
function onPlayerStateChange(event) {
	// 各プレーヤーの状態を確認
	for(var i = 0; i < ytData.length; i++) {
		var thisState = ytPlayer[i].getPlayerState();
		if( thisState == 1 && ytPlaying == undefined) {
			ytPlaying = i;
		} else if(thisState == 1 && ytPlaying != i) {
			ytStop = ytPlaying;
			ytPlay = i;
		} else {
		}
	}
	// 同時再生があった場合、元々再生していた方を停止する
	if(ytStop != undefined) {
		ytPlayer[ytStop].pauseVideo();
		ytStop = undefined;
	}
	// 現在再生中のプレーヤー番号を保存しておく
	if(ytPlay != undefined) {
		ytPlaying = ytPlay;
		ytPlay = undefined;
	}
}