Webアプリ制作-YouTube IFrame Player API

概要解説

YouTube API を利用して、動画閲覧アプリを作成するための API の操作方法を解説します。

事前技術

YouTube API
JavaScript オブジェクトの操作
非同期通信
tridentwebdesign/youtube ｜ GitHub

YouTube IFrame Player API

IFrame Player API を使うと、YouTube 動画プレーヤーをウェブサイトに埋め込み、JavaScript でプレーヤーを制御できます。

iframe 組み込みの YouTube Player API リファレンス｜ YouTube IFrame Player API ｜ Google Developers

とりあえず、コピペして動かしてみましょう。コメントを日本語に訳したコードを記述してあります。

<!DOCTYPE html>
<html>
	<body>
		<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
		<!-- 1. ここの<div>タグがYoutubeの<iframe>に置き換わる。 -->
		<div id="player"></div>

		<script>
			// 2. This code loads the IFrame Player API code asynchronously.
			// 2. 変数tagにscriptタグを作って入れる。Element=要素、Attrubute=属性
			var tag = document.createElement('script');

			tag.src = 'https://www.youtube.com/iframe_api';
			var firstScriptTag = document.getElementsByTagName('script')[0];
			firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

			// 3. This function creates an <iframe> (and YouTube player)
			//    after the API code downloads.
			// 3. APIのコードを読み込んでから、この関数を<iframe>内に影響させる。
			var player;
			function onYouTubeIframeAPIReady() {
				player = new YT.Player('player', {
					height: '360',
					width: '640',
					videoId: 'M7lc1UVf-VE',
					events: {
						onReady: onPlayerReady, //エラーで効かない。
						onStateChange: onPlayerStateChange
					}
				});
			}

			// 4. The API will call this function when the video player is ready.
			// 4. このAPIは、video playderが準備でしたら、この関数を呼び出します。
			function onPlayerReady(event) {
				event.target.playVideo();
			}

			// 5. The API calls this function when the player's state changes.
			//    The function indicates that when playing a video (state=1),
			//    the player should play for six seconds and then stop.
			/* 5. video playerのステート（状態）が変更されたら、この関数を呼び出す。
          動画を再生するときの設定は、state=1にしておきます。
          プレイヤーは、6000ミリ秒後に終了します。 */
			var done = false;
			function onPlayerStateChange(event) {
				if (event.data == YT.PlayerState.PLAYING && !done) {
					setTimeout(stopVideo, 6000);
					done = true;
				}
			}
			//停止関数
			function stopVideo() {
				player.stopVideo();
			}
		</script>
	</body>
</html>

video ID で動画を変更

YouTube の video ID を調べて表示される動画を変更してみよう。
① 好きな動画の video ID を変数 youtubeId に代入します。② プレイヤーのオプション videoId に youtubeId を設定する。
例えば、TRiDENT『DISTINATION』の URL のパラメータ?v=WeCnrYa9U の**WeCnrYa9U**が video ID になります。

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
// 3. APIのコードを読み込んでから、この関数を<iframe>内に影響させる。
let player;

//①video IDを変数 youtubeIdに代入
let youtubeId = 'We__CnrYa9U'; //TRiDENT『DISTINATION』
function onYouTubeIframeAPIReady() {
	//最初のplayerは、変数。後ろのplayerは、<div>のid
	player = new YT.Player('player', {
		height: '360',
		width: '640',
		videoId: youtubeId, //②videoIdをyoutubeIdに変更
		events: {
			onReady: onPlayerReady,
			onStateChange: onPlayerStateChange
		}
	});
}

player のパラメーター追加

YouTube Player の ③ パラメーターを追加し、スマホ用に iOS のインライン再生、コントローラーの非表示を設定する。
パラメーターに関しては、プレイヤーのパラメータを参照。
なるべく、公式のドキュメントを利用します（英語だとしても）。

...
//①video IDを変数 youtubeIdに代入
let youtubeId = 'We__CnrYa9U'; //TRiDENT『DISTINATION』
function onYouTubeIframeAPIReady() {
	//最初のplayerは、変数。後ろのplayerは、<div>のid
	player = new YT.Player('player', {
		height: '360',
		width: '640',
		videoId: youtubeId, //②videoIdをyoutubeIdに変更
		playerVars: {
			//③パラメータの設定
			playsinline: 1,
			controls: 0
		},
		events: {
			onReady: onPlayerReady
			//onStateChange: onPlayerStateChange,
		}
	});
}

デフォルト動画プレイヤー外からの操作

再生
停止
一時停止（ポーズ）
ミュート&ミュート解除
10 秒戻る・10 秒先へ
音量アップ・音量ダウン
再生動画の切り替え
再生スピード

再生

html で再生ボタンを作成して、その再生ボタンで操作します。

<div id="player"></div>
<!-- 動画が表示されている<div>の下に追加 -->
<nav>
	<ul>
		<li id="doplay">再生</li>
	</ul>
</nav>

jQuery を利用する場合は、ダウンロードしてファイルを読み込むか、CDN で読み込んでおきましょう。

<script src="./jquery-3.6.0.min.js"></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

IFrame Player API 内に色々とプロパティの説明があります。
再生の制御とプレーヤーの設定に動画の再生メソッドがあります。
void は１つの式を取って、常に undefined を返す演算子です。

既に player.stopVideo();を使った、停止するための関数 stopVideo()があるので、同じように player.playVideo();で開始する関数 playTheVideo()を定義します。
id="doplay"をクリックすると、再生するイベントを設定します。

//再生関数
function playTheVideo() {
	player.playVideo();
}

//再生イベント
let doplayBtn = document.querySelector('#doplay');
doplayBtn.addEventListener('click', function () {
	playTheVideo(); //関数名に変更
});

//jQueryを利用時の再生イベント
$('#doplay').on('click', function () {
	playTheVideo();
});

停止

html で停止ボタンを作成し、既にある stopVideo 関数を使ったイベントを作成します。まずは、停止ボタンを追加します。

<li id="dostop">停止</li>

続けて、クリックで停止するイベントの作成

//停止イベント
let dostopBtn = document.querySelector('#dostop');
dostopBtn.addEventListener('click', function () {
	stopVideo();
});

//jQueryを利用時の停止イベント
$('#dostop').on('click', function () {
	stopVideo();
});

一時停止（ポーズ）

「停止」してしまうと、再生すると最初からになってしまうので、一時停止ボタンを作成します。

<li id="dopause">一時停止</li>

//一時停止関数
function pauseTheVideo() {
	player.pauseVideo();
}

//一時停止イベント
let dopauseBtn = document.querySelector('#dopause');
dopauseBtn.addEventListener('click', function () {
	pauseTheVideo();
});

//jQueryを利用時の一時停止イベント
$('#dopause').on('click', function () {
	pauseTheVideo();
});

その他の操作

では、上記と同じように、さらに 3 つの操作ボタンを作成してみましょう。
YouTube の動画を操作するメソッドは、再生の制御とプレーヤーの設定に解説されています。

ミュート&ミュート解除
10 秒戻る・10 秒先へ
音量アップ・音量ダウン

ミュート&ミュート解除

ミュートはplayer.mute()、ミュート解除はplayer.unMute()、ミュートかどうかの状態を得るには、player.isMuted()です。
一つのボタンでミュート＆ミュート解除ができた方がいいので、状態を判定します。

<li id="mute">ミュート</li>

//ミュート関数
function onMute() {
	//ミュートの時、trueを返すのでミュートを解除します。
	if (player.isMuted()) {
		player.unMute();
	} else {
		//ミュートが解除されている時はfalseなので、ミュートにします。
		player.mute();
	}
}

//ミュートイベント
let onMuteBtn = document.querySelector('#mute');
onMuteBtn.addEventListener('click', function () {
	onMute();
});

//jQueryを利用時のミュートイベント
$('#mute').on('click', function () {
	onMute();
});

ついでに文字も変わるようにしましょう。

//ミュートイベント
let onMuteBtn = document.querySelector('#mute');
onMuteBtn.addEventListener('click', function () {
	onMute();
	if (onMuteBtn.innerText === 'ミュート') {
		onMuteBtn.innerText = 'ミュート解除';
	} else {
		onMuteBtn.innerText = 'ミュート';
	}
});

//jQueryを利用時のミュートイベント
$('#mute').on('click', function () {
	onMute();
	if ($(this).text() === 'ミュート') {
		$(this).text('ミュート解除');
	} else {
		$(this).text('ミュート');
	}
});

10 秒前へ・10 秒先へ

再生位置を進めたり、戻したりする時はplayer.seekTo(seconds:Number, allowSeekAhead:Boolean)を利用します。
allowSeekAhead は無くても動きますので、第 1 引数の seconds のみを操作します。現在の再生位置を取得するためには、player.getCurrentTime()を利用します。

<li id="do10sNext">10秒先へ</li>
<li id="do10sPrev">10秒戻る</li>

//10秒前にの関数
function onePrev() {
	let currentTime = player.getCurrentTime();
	player.seekTo(currentTime - 10);
}

//10秒後にの関数
function oneNext() {
	let currentTime = player.getCurrentTime();
	player.seekTo(currentTime + 10);
}

//10秒前へイベント
let onePrevBtn = document.querySelector('#do10sPrev');
onePrevBtn.addEventListener('click', function () {
	onePrev();
});

//10秒後へイベント
let oneNextBtn = document.querySelector('#do10sNext');
oneNextBtn.addEventListener('click', function () {
	oneNext();
});

//jQuery利用時の10秒前へイベント
$('#do10sPrev').on('click', function () {
	onePrev();
});

//jQuery利用時の10秒後へイベント
$('#do10sNext').on('click', function () {
	oneNext();
});

音量アップ・音量ダウン

音量を設定するメソッドは、player.setVolume(volume:Number)で操作できます。
現在の音量は、player.getVolume():Numberで取得でき、0〜100 で設定できます。
レンジスライダー<input type="range">で操作してみましょう。
ただし、iOS では Safari などアプリでの音量調整を許可していませんので、利用できません。Android は OK。

<label
	>ボリューム<input type="range" min="0" max="100" name="volume" id="volume" value="50" />
	<span id="volumeNum"></span>
</label>

//ボリューム関数
function volumeFn(vol) {
	let currentVol = player.getVolume();
	player.setVolume(vol);
}

//ボリュームイベント
let volumeBtn = document.querySelector('#volume');
let volumeTxt = document.querySelector('#volumeNum');
volumeBtn.addEventListener('change', function () {
	volumeFn(this.value);
	volumeTxt.textContent = this.value;
});

//jQuery利用時のボリュームイベント
$('#volume').on('change', function () {
	volumeFn($(this).val());
	$('#volumeNum').text($(this).val());
});

最初の再生時に音量を range フォームに設定したいので、

最初の再生を止める
最初のボリュームを設定（0〜100）
Player のボリュームに設定
rangeForm に音量を設定
テキストにも音量を数値で表示

// 4. The API will call this function when the video player is ready.
// 4. このAPIは、video playderが準備でしたら、この関数を呼び出します。
function onPlayerReady(event) {
	event.target.playVideo(); //①最初の再生を止める
	let currentVol = 5; //②最初のボリュームを設定（0〜100）
	event.target.setVolume(currentVol); //③Playerのボリュームに設定
	document.querySelector('#volume').value = currentVol; //④rangeFormに音量を設定
	document.querySelector('#volumeNum').textContent = currentVol; //⑤テキストにも音量を数値で表示
}

最初の 6 秒でストップするのも止める。

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
//3.　APIのコードを読み込んでから、この関数を<iframe>内に影響させる。
let player;

let youtubeId = 'dy90tA3TT1c';

function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		height: '360',
		width: '640',
		videoId: youtubeId,
		playerVars: {
			playsinline: 1,
			controls: 0
		},
		events: {
			onReady: onPlayerReady
			//'onStateChange': onPlayerStateChange ⑤ 6秒でストップするのを止める。
		}
	});
}

動画の切り替えと再生スピード

動画の切り替え

<select>メニューから動画を切り替えられるようにしましょう。
value に YouTube ID を設定します。

<li>
	<select id="MovieId" class="ytMovie" name="ytMovie">
		<option selected>選択してください。</option>
		<option value="bjN-3EyXNyE">TRiDENT『Alive』MV</option>
		<option value="We__CnrYa9U">TRiDENT『DISTINATION』</option>
		<option value="I6ld4ecEp7s">TRiDENT『IMAGINATION』MV</option>
		<option value="azQVVhMUz58">TRiDENT『Continue』MV【exガールズロックバンド革命】</option>
	</select>
</li>

すでに動画が読み込まれているので、player.destroy():Voidで削除します。
続いて、onYouTubeIframeAPIReady()で再度、選択した Youtube Id で読み込みます。

//動画切り替えイベント
let movieid = document.querySelector('#MovieId');
movieid.addEventListener('change', function () {
	youtubeId = movieid.value;
	//プレイヤー削除
	player.destroy();
	onYouTubeIframeAPIReady();
});

//jQuery利用時の動画切り替えイベント
$('#MovieId').on('change', function () {
	youtubeId = $(this).val();
	//プレイヤー削除
	player.destroy();
	onYouTubeIframeAPIReady();
});

再生スピードの切り替え

radio ボタンで再生スピードを切り替えられるようにします。

<li>
	<form id="doSpeed">
		<input type="radio" id="mslow" name="speed" value="0.25" />
		<label for="mslow">0.25</label>
		<input type="radio" id="slow" name="speed" value="0.5" />
		<label for="slow">0.5</label>
		<input type="radio" id="normal" name="speed" value="1.0" checked />
		<label for="normal">1</label>
		<input type="radio" id="hspeed" name="speed" value="1.5" />
		<label for="hspeed">1.5</label>
		<input type="radio" id="mhspeed" name="speed" value="2" />
		<label for="mhspeed">2</label>
	</form>
</li>

setPlaybackRate()が再生スピードをセットするメソッドなので、radio ボタンから数値を取得して再生をさせる。

//再生スピード関数
function playSpeed(num) {
	//setPlaybackRateが再生スピードをセットするメソッド
	console.log(num);
	player.setPlaybackRate(num);
	player.playVideo();
}

//再生スピードイベント
let speedBtn = document.querySelector('#doSpeed');
speedBtn.addEventListener('change', function () {
	//数値でないと効かないので、文字列から数値に変換
	playSpeed(parseFloat(speedBtn.speed.value));
});

//jQuery利用時の再生スピードイベント
$('#doSpeed input[name = speed]').on('change', function () {
	//数値でないと効かないので、文字列から数値に変換
	playSpeed(parseFloat($(this).val()));
});

他にも、画質の設定など、さまざまな設定を JavaScript から操作できます。

参考：YouTube Player API を使って色々やってみる｜ Tips Note by TAM

また、これらの操作方法は、HTML5 の Media API を利用していますので、オリジナルの動画を使って同じように操作することが可能です。

動画と音声の API - ウェブ開発を学ぶ | MDN

Webデザイン学科
授業資料