YouTubeプレーヤーAPIをjQueryで扱う

YouTubeプレーヤーAPIでプレーヤーを埋め込み、$(function)内で再生をしようとした時に、少しうまくいかない部分があったので対応方法をメモしておきます。

サンプルコード

$(function) 内で再生を実行させたかったので、以下のようにしてみました。

HTML

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

JavaScript

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

var ytArea = 'sample';
var ytID = '1_n_k5nNA3A';
var ytWidth = 640;
var ytHeight = 390;

function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		height: ytHeight,
		width: ytWidth,
		videoId: ytID
	});
}

$(function() {
	ytPlayer.playVideo();
});

YouTubeプレーヤーAPIをjQueryで扱うデモページ1
$(function)内で別の処理を行ってからYouTubeを再生させたかったのですが、YouTubeが読み込まれる前にytPlayer.playVideo(); を実行しているため、ytPlayer is not definedとエラーが出てしまいます。
 

サンプルコード

YouTubeの読み込みが完了してから、ytPlayer.playVideo(); を実行するようにして対応しました。

JavaScript

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

var ytArea = 'sample';
var ytID = '1_n_k5nNA3A';
var ytWidth = 640;
var ytHeight = 390;

function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		height: ytHeight,
		width: ytWidth,
		videoId: ytID,
		events: {
			'onReady': onPlayerReady
		}
	});
}

var ytReady = false;
function onPlayerReady(e) {
	ytReady = true;
}

$(function() {
	function ytCheck() {
		if(ytReady) {
			ytPlayer.playVideo();
		} else {
			setTimeout(ytCheck, 200);
		}
	}
	ytCheck();
});

YouTubeプレーヤーAPIをjQueryで扱うデモページ2
 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31