YouTubeのプレーヤーAPIの使い方

YouTubeプレーヤーの埋め込みから、再生や停止、プレーヤーの状態の取得などをPlayer APIを使って実装してみます。

YouTubeプレーヤーの埋め込み

まずは今回使用するYouTubeプレーヤーを埋め込みます。

HTML

bodyの閉じタグの直前にjsファイルを読み込ませます。
今回はこのsample.js内に必要な記述を追加していきます。

<script src="./sample.js"></script>

JavaScript

sample.js内にYouTube Player APIを読み込む記述を追加します。

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

HTML

HTML内にYouTubeプレーヤーを埋め込む場所を作っておきます。

<div id="sample"></div>

JavaScript

YouTubeプレーヤーを埋め込む場所、埋め込む動画のID、サイズを指定しておきます。
その後、これらの変数を参照してYouTubeプレーヤーを埋め込みます。

// プレーヤーを埋め込む場所
var ytArea = 'sample';

// 埋め込むYouTube ID
var ytID = 'aIeXZ5sHDrc';

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

// API読み込み後にプレーヤー埋め込み
function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		height: ytHeight,
		width: ytWidth,
		videoId: ytID
	});
}

YouTubeプレーヤー埋め込みのデモページ
　

YouTubeプレーヤーの制御

再生や停止、シークバーの移動、音量の変更をJavaScriptで制御してみます。

HTML

制御用のボタンを作成します。

<button id="play">再生</button>
<button id="pause">一時停止</button>
<button id="stop">停止</button>
<button id="prev">10秒前へ</button>
<button id="next">10秒先へ</button>
<button id="volup">音量アップ</button>
<button id="voldown">音量ダウン</button>
<button id="mute">ミュート</button>

JavaScript

各ボタンにイベントを追加していきます。

// 再生
var ytPlay = document.getElementById('play');
ytPlay.addEventListener('click', function() {
	ytPlayer.playVideo();
});

// 一時停止
var ytPause = document.getElementById('pause');
ytPause.addEventListener('click', function() {
	ytPlayer.pauseVideo();
});

// 停止
var ytStop = document.getElementById('stop');
ytStop.addEventListener('click', function() {
	ytPlayer.pauseVideo().seekTo(0);
});

// 10秒前へ
var ytPrev = document.getElementById('prev');
ytPrev.addEventListener('click', function() {
	// 現在の再生時間取得
	var currentTime = ytPlayer.getCurrentTime();
	ytPlayer.seekTo(currentTime - 10);
});

// 10秒先へ
var ytNext = document.getElementById('next');
ytNext.addEventListener('click', function() {
	// 現在の再生時間取得
	var currentTime = ytPlayer.getCurrentTime();
	ytPlayer.seekTo(currentTime + 10);
});

// 音量アップ(+10)
var ytVolup = document.getElementById('volup');
ytVolup.addEventListener('click', function() {
	// 現在の音量取得
	var currentVol = ytPlayer.getVolume();
	ytPlayer.setVolume(currentVol + 10);
});

// 音量ダウン(-10)
var ytVoldown = document.getElementById('voldown');
ytVoldown.addEventListener('click', function() {
	// 現在の音量取得
	var currentVol = ytPlayer.getVolume();
	ytPlayer.setVolume(currentVol - 10);
});

// ミュート
var ytMute = document.getElementById('mute');
ytMute.addEventListener('click', function() {
	// ミュートされているかどうか
	if(ytPlayer.isMuted()) {
		// ミュートの解除
		ytPlayer.unMute();
	} else {
		// ミュート
		ytPlayer.mute();
	}
});

YouTubeプレーヤーの制御のデモページ
停止に関してはstopVideo()というのもありますが、動画の読み込みをキャンセルしてしまうので、
pauseVideo()で一時停止状態にしてからseekTo(0)で再生時間を0にしたほうがいいかもしれません。

YouTubeプレーヤーの状態を取得

YouTubeプレーヤーの準備完了時、ステータス変更時、何らかのエラーが発生した時に処理を行ってみます。

HTML

動画のステータスに応じてテキストを変更するのと、読み込み完了後に動画の長さを取得してみます。

<div id="status">現在のステータス：</div>
<div>動画の長さ：<span id="total"></span></div>

JavaScript

最初に記述したYouTubeプレーヤーの埋め込みに、イベントを追加します。
今回はonReady、onStateChange、onErrorの3つを追加しました。

// API読み込み後にプレーヤー埋め込み
function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		height: ytHeight,
		width: ytWidth,
		videoId: ytID,
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange,
			'onError': onPlayerError
		}
	});
}

JavaScript

それぞれのイベント時の関数を用意します。

function onPlayerReady(e) {
	// 読み込み完了後に自動再生
	e.target.playVideo();
	// 動画の長さ取得
	var total = document.getElementById('total');
	total.innerHTML = e.target.getDuration() + '秒';
}

var stateArea = document.getElementById('status');
function onPlayerStateChange(e) {
	// 現在のステータス取得
	var ytStatus = e.target.getPlayerState();
	var stateIns = '現在のステータス：';
	// ステータスの判別
	switch (ytStatus) {
		case -1:
			stateIns += '未開始(-1)';
			break;
		case 0:
			stateIns += '終了(0)';
			break;
		case 1:
			stateIns += '再生中(1)';
			break;
		case 2:
			stateIns += '停止(2)';
			break;
		case 3:
			stateIns += 'バッファリング中(3)';
			break;
		case 5:
			stateIns += '頭出し済み(5)';
			break;
		default:
			break;
	}
	stateArea.innerHTML = stateIns;
}

function onPlayerError(e) {
	// エラーの種別取得
	var ytError = e.data;
	var errorIns = '読み込みに失敗しました。';
	// エラーの判別
	switch (ytError) {
		case 2:
			errorIns += '無効なパラメータ値が含まれています。(2)';
			break;
		case 5:
			errorIns += 'HTML5プレーヤーで再生できない、または HTML5プレーヤーに関する別のエラーが発生しました。(5)';
			break;
		case 100:
			errorIns += '動画が見つかりません。(100)';
			break;
		case 101:
			errorIns += '動画の所有者が、埋め込み動画プレーヤーでの再生を許可していません。(101)';
			break;
		case 150:
			errorIns += '動画の所有者が、埋め込み動画プレーヤーでの再生を許可していません。(150)';
			break;
		default:
			break;
	}
	alert(errorIns);
}

YouTubeプレーヤーの状態を取得のデモページ
イベントオブジェクトを引数として各関数にもたせることができます。
イベントオブジェクトにはそれぞれtarget、dataのプロパティが含まれています。

【参考サイト】

• YouTube 埋め込みプレーヤーとプレーヤーのパラメータ – YouTube — Google Developers
• iframe 組み込みの YouTube Player API リファレンス – YouTube — Google Developers