Youtube APIのはまり事

プログラミング javascript

自作のYoutubeプレーヤーを作成してたら、API経由の動画制御ができずにはまる。起動時の動画読込はできるが、下記問題事象が起きていた。

  • プレーヤーオブジェクトにメソッドが定義されておらず例外発生
  • 動画読込後に呼び出されるはずのonYouTubePlayerReady()も呼び出されない

どうやらWebサーバー上で実行されないといけなかった。ドキュメントにもそう書いてある。

注: Flash Player ではローカル ファイルとインターネット間での呼び出しが制限されているため、これらの呼び出しをテストするには、Web サーバー上でファイルを実行する必要があります。

Webサーバーから呼び出したらうまく実行できた。が、小さい画面で常に最前面表示にして、別作業したいと思っていたけどWebサーバー経由かと思うと、、、これからどうするか悩む。

<html>
<head>
<link rel="stylesheet" href="./js/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="../demos.css">
<script src="./js/jquery-1.5.1.js"></script> 
<script src="./js/ui/jquery.ui.core.js"></script> 
<script src="./js/ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
	/////////////////////////
	// player settings
	/////////////////////////
	var playerAreaId = "playerArea";
	var playerId = "ytplayer";
	var params={ allowScriptAccess: "always" };
	var atts={ id: playerId };
	var options = "enablejsapi=1&playerapiid=" + playerId + "&border=0&autoplay=1&loop=1";	// default options
	
	var youtubeUrl = "http://www.youtube.com/v/";
	var currentVideoId = "";  // 任意のビデオID
	
	/////////////////////////
	// methods
	/////////////////////////
	function makePlayer(playerAreaId, options){
		var url = youtubeUrl + currentVideoId + "&" + options;
		swfobject.embedSWF(url, playerAreaId, document.body.clientWidth, document.body.clientHeight, "8", null, null, params, atts);
	}
	
	/////////////////////////
	// initial page settings
	/////////////////////////
	$(function(){		
		// play default movie
		makePlayer(playerAreaId, options);
	});
</script>
</head>
<body>
<!-- player -->
<div id="playerArea"></div>
</body>
</html>