OrangeMaker_logo
Memo アイコン Web技術備忘録

infomation

Web系技術やテクニックに関するメモです。（css+xhtmlを使用する前提です。）
（素人に近いレベルなのでたいしたトピックはありません。当然、記載内容が正しいことを保障するものではありません。）

超簡単に自分専用YouTubePlayerを作る

2010/2/17 作成

ブログに一度書いたのですが、忘れそうなのでメモしておきます。
YouTubeにアカウントを作成すると自分用のカスタムプレーヤーを設定する機能が使えます。
このカスタムプレーヤーを設定すると、Webページに貼り付け用のタグを生成してくれる機能があります。
このタグを、空のWinodwを表示するだけの.htaファイルに組み込みを行うとお気に入りの連続再生を行うYouTubePlayerが出来上がります。

手順を整理すると、

  1. YouTubeにアカウントを作成する
  2. アカウントページにあるカスタムプレーヤーの設定を選択する
  3. お好きなレイアウト＆設定でカスタムプレーヤーを作成する。
  4. 作成したプレーヤーのタグを生成してこれをメモ帳などにコピーしておく。
  5. 空のウィンドウを表示するだけの.htaファイルを用意する。
  6. .htaファイルのbody部に4)で取得済みタグを挿入する

とこんな風になります。

空のウィンドウを表示するだけの.htaファイルは、

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>YouTubePlayer</TITLE>
<HTA:APPLICATION
	APPLICATIONNAME = "YouTubePlayer"
	BORDER = "dialog"
	BORDERSTYLE = "normal"
	CAPTION = "yes"
	CONTEXTMENU = "no"
	ICON = "player.ico"
	ID = "oCheck"
	INNERBORDER = "no"
	MAXIMIZEBUTTON = "no"
	MINIMIZEBUTTON = "yes"
	NAVIGABLE = "yes"
	SCROLL = "no"
	SCROLLFLAT = "yes"
	SELECTION = "no"
	SHOWINTASKBAR = "yes"
	SINGLEINSTANCE = "no"
	SYSMENU = "yes"
	VERSION = "1.0.0"
	WINDOWSTATE = "normal"
/>
<script type="text/javascript" >
<!--
	window.resizeTo(746+6, 413+28); // ウィンドウサイズ設定
	window.moveTo(30, 40);// ウィンドウ移動
//-->
</script>

</HEAD>
<body style="background-color:black;margin:0px">
	ここにカスタムプレーヤーのタグを貼り付けます。
</body>
</HTML>

とこんな感じで設定できます。HTAタグの部分がWindowの体裁を設定する部分です。
 htaタグの詳細はMSDNのこのページに詳細に載っています。
 JavaScriptで記述しているWinodow.resizeTo(w,h)がウィンドウの幅と高さを設定しています。
この幅と高さはは、実際に設定したPlyerの幅と高さ＋αとなります。(ウィンドウのフレーム分がαです)
Playerの幅と高さは、生成したObjectタグを参照すればわかります。
(javascriptで実行時の大きさから可変設定が可能かも知れませんが、固定でもそう不自由なことはないと思います。)
同じく、Window.moveTo(x,y)がウィンドウの初期位置を設定しています。これもjavascriptでスクリーンの大きさから中央に表示したりできると思いますが毎回同じ位置固定で設定しています。

とりあえず、メモ帳だけで出来るのが楽しいですね。

YouTubePlayerサンプル