Zenn
🔰

IFramePlayerAPIでかんたんYoubuePlayer

2022/12/25に公開
JavaScript
YouTube
初心者
video
初心者向け
tech

IFramePlayerAPIとは!?

IFramePlayerAPIを利用する事で、YoutubePlayerを簡単に実装する事ができます。

IFramePlayerAPI

今回はこのライブラリでYoutubeを再生して遊んでみます。

プロジェクトを用意する

次の様にプロジェクトを作ります。

MyProject01/
　├ index.html (プログラムを起動するファイルです)
　├ custom.css (CSSを記述するファイルです)
　├ main.js (メインのプログラムを記述するファイルです)

HTMLファイルを用意する

では、作っていきましょう。
用意したHTMLファイルには次のコードを記述します。
(ライブラリの読み込みは、JavaScript側で実装します)

index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<!-- Stylesheet -->
	<link href="./custom.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="my_player"></div>
	<!-- JavaScript -->
	<script src="./main.js"></script>
</body>
</html>

CSSファイルを用意する

次はCSSファイルです。
こちらは特に説明することはありませんね。

custom.css
/* custom.css */
body{
	width: 100%; height: 100%;
	margin: 0px; padding: 0px;
	background-color: silver;
}

JavaScriptファイルを用意する

メインの処理です。
JavaScriptファイルには次のコードを記述します。(今回の完成コードです)

main.js
console.log("Hello Youtube!!");

// 1, ライブラリの読み込み
window.onload = function(){
	console.log("onload!!");
	// Ready
	const tag = document.createElement("script");
	tag.src = "https://www.youtube.com/iframe_api";
	const firstScriptTag = document.getElementsByTagName("script")[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

// 2, プレイヤーの準備
function onYouTubeIframeAPIReady(){
	console.log("onYouTubeIframeAPIReady!!");
	// Player
	const player = new YT.Player("my_player", {
		width:   "480",
		height:  "320",
		videoId: "xjI5qbUB47k";// 会津ほまれ
		events:{
			"onReady": onPlayerReady,
			"onStateChange": onPlayerStateChange
		}
	});
}

// 3, プレイヤーの操作
function onPlayerReady(event){
	console.log("onPlayerReady!!");
	console.log(event);
	event.target.setPlaybackQuality("small");// Quality
	event.target.playVideo();                // Play
}

// 4, プレイヤーのイベント各種
function onPlayerStateChange(event){
	console.log("onPlayerStateChange:" + event.data);
	if(event.data == YT.PlayerState.PLAYING)   console.log("PLAYING!!");
	if(event.data == YT.PlayerState.PAUSED)    console.log("PAUSED!!");
	if(event.data == YT.PlayerState.ENDED)     console.log("ENDED!!");
}

コードの解説

上記のコードについて、次の順番で解説を進めます。

  1. ライブラリの読み込み
  2. プレイヤーの準備
  3. プレイヤーの操作
  4. プレイヤーのイベント各種

1,ライブラリの読み込み

"window.onload()"の部分では、"IFramePlayerAPI"ライブラリを読み込むタグを生成し、HTMLに埋め込んでいます。

main.js(抜粋)
console.log("Hello Youtube!!");

// 1, ライブラリの読み込み
window.onload = function(){
	console.log("onload!!");
	// Ready
	const tag = document.createElement("script");
	tag.src = "https://www.youtube.com/iframe_api";
	const firstScriptTag = document.getElementsByTagName("script")[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
// 省略

2,プレイヤーの準備

ライブラリの読み込みが完了すると、"onYouTubeIframeAPIReady()"が実行されます。
このタイミングでプレイヤーの準備をします。

main.js(抜粋)
// 省略
// 2, プレイヤーの準備
function onYouTubeIframeAPIReady(){
	console.log("onYouTubeIframeAPIReady!!");
	// Player
	const player = new YT.Player("my_player", {
		width:   "480",
		height:  "320",
		videoId: "xjI5qbUB47k";// 会津ほまれ
		events:{
			"onReady": onPlayerReady,
			"onStateChange": onPlayerStateChange
		}
	});
}
// 省略

第一引数には、プレイヤーを表示するIDを、
第二引数には、プレイヤーの幅や高さ、動画ID等を指定します。

パラメータ 用途
width, height 動画の幅、高さ
videoID Youtube動画の再生ID
onReady プレイヤーの準備ができた時に実行される
onStateChange プレイヤーの状態が変化した時に実行される

ここで言う"videoID"とは、youtubeでの再生時、"v=xxx"に記述されているIDとなります。

https://www.youtube.com/watch?v=xjI5qbUB47k

3,プレイヤーの操作

プレイヤーの準備ができたタイミングで、"onPlayerReady()"が実行されます。
ここでプレイヤーの操作を行う事が可能です。

main.js(抜粋)
// 省略
// 3, プレイヤーの操作
function onPlayerReady(event){
	console.log("onPlayerReady!!");
	console.log(event);
	event.target.setPlaybackQuality("small");// Quality
	event.target.playVideo();                // Play
}
// 省略

"event.target"には、プレイヤーオブジェクトが格納されています。
このオブジェクトに対して、様々な命令を実行させる事が可能です。

主な命令 用途
playVideo() 動画を再生します
pauseVideo() 動画を停止します
stopVideo() 動画を停止してキャンセルします
mute() ミュートにします
unMute() ミュートを解除します
setVolume(num) 0~100の範囲で音量を指定

4,プレイヤーのイベント各種

"onPlayerStateChange()"で渡される"event.data"を確認する事で、
プレイヤーの状態を判断する事ができます。

main.js(抜粋)
// 省略
// 4, プレイヤーのイベント各種
function onPlayerStateChange(event){
	console.log("onPlayerStateChange:" + event.data);
	if(event.data == YT.PlayerState.PLAYING)   console.log("PLAYING!!");
	if(event.data == YT.PlayerState.PAUSED)    console.log("PAUSED!!");
	if(event.data == YT.PlayerState.ENDED)     console.log("ENDED!!");
}
主なイベント 用途
PLAYING 動画の再生
PAUSED 動画の停止
ENDED 動画の終了

これだけでYoutubePlayerが実装できます。(やりました!!)

最後に

今回はYoutubePlayerを作って遊んでみました。
コードも簡単なので、ぜひ挑戦してみてくださいね。
ここまで読んでいただき有難うございました。

Discussion