読者です 読者をやめる 読者になる 読者になる

16bit!

エンジニアじゃなくなっちゃった人が何かを書くブログ

【js】Webサイトに埋め込んだYouTubeの動画IDをボタンクリックなどで変更する方法

YouTubeのiframeのAPIを使ってWebサイトにプレーヤーを埋め込む方法については、公式リファレンスにサンプルコードがそのまま載ってます。

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

が、再生する動画を動的に変更したい、例えば、

・サーバから再生する動画のIDを読み込んで、それを再生したい
・ボタンを押すと動画が変わるようにしたい(テレビのリモコンのように)

とかを実現しようと思うと、公式リファレンスのそのままコピペが使えず、ちょっと手を入れてあげる必要がありますので、メモ程度に書いておきます。

備忘メモ

まずはサーバ等から動画IDを取得し、それを引数にしてプレーヤーを生成する方法の一例。

var vId;

//画面ロード時に動画IDの読み込み処理を行う
window.onload = function(){
	loadVideoData();
}

//動画情報ロード
function loadVideoData() {
	//1.コールバックでプレイヤーの読込を呼ぶとか
	dataManager.load(function() {
		loadPlayer(vId);
	});

	//2.普通に読み込み > プレイヤー呼び出しするとか
	vId = dataManager.load();
	loadPlayer(vId);
}

//プレイヤーの生成
function loadPlayer(v_Id) {
	//プレイヤー生成
	player = new YT.Player('player', {
	height: '360',
	width: '640',
	videoId: v_Id,
	events: {
		'onReady': onPlayerReady,
		'onStateChange': onPlayerStateChange
		}
	});	
}

こんな感じ。
公式リファレンスのサンプルだと、「2」のAPIのコードのダウンロードが完了した瞬間にプレーヤーの生成が行われてしまい、動画IDをセットしてあげている暇がないので、「3」の部分を丸々削除して、自分でプレイヤーの生成を呼ぶようにしてあげることで、任意の動画IDを指定してプレーヤーを埋め込むことができます。

次、ボタンクリックとかで動画を切り替える方法。

function onClickButton(){
	setVId();
	playNewVideo();
}

function playNewVideo() {
	player.clearVideo();
	player.loadVideoById(vid);
	player.playVideo();
}

こんな感じ。
clear > load > play というシンプルな流れですね。


終わり。