YouTube IFrame Player APIのメモ

らら
らら

はじめに

おしえてもらったのでわすれないようにメモです。

https://www.youtube.com/iframe_apiをscriptで呼び出します。

このスクリプトは、使い方が特殊でコールバック？される関数の記述をしておくことで呼び出しされます。

今回は下記の関数を準備します。

onYouTubeIframeAPIReady

下記は、onYouTubeIframeAPIReadyより。イベントで呼び出しします。こちらは名前はなんでもよいかと。

onPlayerReady

onPlayerStateChange

サンプルコード

自動再生させて、関連動画を表示させず、再生ループさせます・

videoAreaのIDがifameが追加されます。


<div id="videoArea"></div>
<script>
var youtube_id = "YouTUbeの動画ID";
if(youtube_id) {
	// YouTube 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);
}
//YouTube IFrame Player APIを非同期で読み込みます。
var player;
function onYouTubeIframeAPIReady() {
	//動画を埋め込む場所を指定
	player = new YT.Player('videoArea', {
		videoId: youtube_id,
		playerVars: {
			playsinline: 1,
			loop: 1,
			listType: 'playlist',
			playlist: youtube_id,	//リピートするには入力必須
			rel: 0,					//関連動画の非表示させる
			controls: 0,			//プレーヤーコントロール非表示
		},
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
}
//プレーヤの準備完了後に呼出す関数
function onPlayerReady(event) {
	event.target.mute();			//ミュートにしないとスマホで再生しない
	event.target.playVideo();		//ビデオを再生
}
function onPlayerStateChange(event) {
	var ytStatus = event.target.getPlayerState();
	if (ytStatus == YT.PlayerState.ENDED) {
		event.target.mute();		//ミュートにしないとスマホで再生しない
		event.target.playVideo();	//ビデオを再生
	}
}
</script>

さいごに

メモです・・ノルマです。。

改正個人情報保護法で、このあたりってどうなるんですかね・・API・・

関連記事