YouTube Player API 複数の動画を読み込む方法

YouTube Player APIを利用すると、動画再生のループや停止など、JavaScriptでプレーヤーを制御できるのでとても便利です。
今回は一つのページ内に、複数のYouTube動画を埋め込む方法をご紹介します。
複数の動画を読み込む方法
サンプル
See the Pen by RECOOORD (@recooord) on CodePen.
まずはサンプルをご覧ください。
YouTube動画が並んで表示されているのが確認できると思います。
HTML
<div id="video01"></div>
<div id="video02"></div>
<div id="video03"></div>
<div id="video04"></div>
HTMLではIDを入れた要素を作成してください。
JavaScript
//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 ytPlayer = [];
var ytData = [
{
id: 'M7lc1UVf-VE', //YouTubeのID
area: 'video01' //表示する場所
}, {
id: 'M7lc1UVf-VE', //YouTubeのID
area: 'video02' //表示する場所
}, {
id: 'M7lc1UVf-VE', //YouTubeのID
area: 'video03' //表示する場所
}, {
id: 'M7lc1UVf-VE', //YouTubeのID
area: 'video04' //表示する場所
}
];
function onYouTubeIframeAPIReady() {
for(var i = 0; i < ytData.length; i++) {
ytPlayer[i] = new YT.Player(ytData[i]['area'], {
width: '640', //プレーヤーの幅
height: '360', //プレーヤーの高さ
videoId: ytData[i]['id'], //YouTubeのID
});
}
}
ytDataの配列にYouTubeのIDと、動画を表示するために、先ほどHTMLで指定したIDを入れていきます。
このように記述することで、複数のYouTube動画を表示することができます。
しかし注意点としては、動画の再生ボタンを複数クリックした際に、他の動画も同時に再生されてしまいます。
同時再生しないようにする方法
サンプル
See the Pen YouTube Player API Multiple02 by RECOOORD (@recooord) on CodePen.
上記のサンプルで動画を複数再生させてみてください。
一つだけが再生されるのが確認できたと思います。
JavaScript
//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 ytPlayer = [];
var ytPlaying, ytStop, ytPlay;
var ytData = [
{
id: 'M7lc1UVf-VE', //YouTubeのID
area: 'video01' //表示する場所
}, {
id: 'M7lc1UVf-VE', //YouTubeのID
area: 'video02' //表示する場所
}, {
id: 'M7lc1UVf-VE', //YouTubeのID
area: 'video03' //表示する場所
}, {
id: 'M7lc1UVf-VE', //YouTubeのID
area: 'video04' //表示する場所
}
];
function onYouTubeIframeAPIReady() {
for(var i = 0; i < ytData.length; i++) {
ytPlayer[i] = new YT.Player(ytData[i]['area'], {
width: '640', //プレーヤーの幅
height: '360', //プレーヤーの高さ
videoId: ytData[i]['id'], //YouTubeの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;
}
}
// 同時再生があった場合、元々再生していた方を停止する
if (ytStop != undefined) {
ytPlayer[ytStop].pauseVideo();
ytStop = undefined;
}
// 現在再生中のプレーヤー番号を保存しておく
if (ytPlay != undefined) {
ytPlaying = ytPlay;
ytPlay = undefined;
}
}
onPlayerStateChange関数で、各プレーヤーの状態を確認し、条件分岐で再生を停止したりしています。
YouTube動画の自動再生や、ループ再生の方法などを参照する場合は、別ページにて紹介しております。
是非ご覧くださいませ。