さんまがおいしい季節だねー(´・ω・`)

ActionScript3 で YouTube Player API を使う方法

Flash — タグ: , , , — さくら @ 2009/03/27 2:25

さくらです、こんばんわ♪ミ☆

今日は ActionScript3 で YouTube Player API を利用する方法について説明します。

まず最初に、ActionScript3 から YouTube Player API を利用できない理由から書くわね!
今公開されてる Flash 用の YouTube Player API は ActionScript2 で記述されているの。ActionScript3 の API は公開されていないわ。だから ActionScript3 から直接 YouTube Player API を利用することはできないのよ。
重要なのは Flex3 から YouTube Player API を利用するができないってことね。
さくらも困ったわ。

でも安心して!
ちゃんと回避する方法があるから!

ActionScript3 から YouTube Player API を使うには2つの方法があるわ。
一つは LocalConnection 経由で ActionScript3 アプリから ActionScript2 の API を呼び出す方法、もう一つは ExternalInterface 経由で Flash から JavaScript の YouTube Player API を呼び出す方法よ。

最初さくらは何となく ExternalInterface で JavaScript 呼び出す方法を使ってみたんだけど、こっちはクロスドメイン制約で YouTube Player が表示されないことがあるみたいだし、LocalConnection 経由で AS2 の API 呼び出す方法で使えない機能がある訳でもないから、あんまりお薦めしないわ。
なんでこっちの方法についてはこの記事では説明しないから、興味のある人は ActionScript 3.0 Wrapper for Chromeless Player でも参考にしてちょうだい。

TubeLoc

では LocalConnection 経由で ActionScript3 アプリから ActionScript2 の API を呼び出す方法について説明するわね。

まず ActionScript3 から YouTube Player API を呼び出すには TubeLoc ライブラリが必要よ。
TubeLoc は Google Code からダウンロードできるわ。
TubeLoc ライブラリは Apache License Version 2.0 で配布されてるから気兼ねなく利用できるのも魅力的ね!


…ダウンロードした?

…早くして!!

ダウンロードしたら ZIP を解凍するの。

今さくらの手元にあるのは TubeLoc_0.5.4.zip よ。これを解凍すると TubeLoc_0.5.4 と __MACOSX というディレクトリができるわ。__MACOSX の方は MacOSX じゃない人はたぶん要らないはずだから消しちゃっていいわよ。

解凍したら TubeLoc_0.5.4/as3 ディレクトリに cd よ。

$ cd TubeLoc_0.5.4/as3

このディレクトリに ActionScript3 で YouTube Player API を使うために必要なものがすべて揃ってるわ。
サンプルアプリも入ってるから、ant を持ってるならビルドしてみるのも手ね。
サンプルをビルドするときは -DFLEX_HOME=$FLEX_HOME オプションを付けて ant を動かす必要があるわ。
Flex3 を /usr/local/flex3 にインスコした場合はこうね。

$ ant -DFLEX_HOME=/usr/local/flex3

ビルドに成功したら dist ディレクトリができてるはずよ。dist ディレクトリにはこんなファイルがあるはずだわ。

$ ls dist
TubeLoc.html TubeLoc.swf as2_tubeloc.swf swfobject.js

TubeLoc.swf がサンプルアプリね。as2_tubeloc.swf は TubeLoc.swf から YouTube Player API を呼び出すために必要なラッパーライブラリよ。TubeLoc を使ったアプリを公開する場合は as2_tubeloc.swf も基本的に同じサーバに置く必要があるわ。
ちなみにこのサンプルを動かす場合は、ウェブサーバ上に配置する必要があるわ。firefox からローカルファイルシステム上の TubeLoc.html を開いても YouTube のクリップは表示されないから注意してね。これも Flash のセキュリティポリシーのせいよ。ややこしいのよ、本当に。

まあ他人の作ったサンプル見てても面白くないから、とりあえず何か作ってみましょ!

さくらのサンプル

さくらのサンプルウェブアプリの仕様はいたって簡単よ。

  1. YouTube の videoID を入力してもらうの!
  2. そしたらそのクリップを表示するの!!

こんだけよ!
だいたい YouTube Player API 使ってしたいことってこの辺なんじゃないかしら?

完成したらこんな感じね!!

ちなみにこのオッサンは超絶変態ギタリストでマスター・オブ・テレキャスターのダニー・ガットンよ!
どのくらい変態かは見たら分かるわ。すごい変態よ!!
さくらのスタンドはクリップ見ても何弾いてるか全く分かんないってほざいてるわ!

じゃー作るわよ。
まず最初は、適当なディレクトリ作って TubeLoc の Zip から as3/lib/as2_tubeloc.swf と as3/src/com/ を作ったディレクトリにコピーするのよ。
とりあえず以下の例では TubeLoc_0.5.4 の親ディレクトリに TubeLocExam ディレクトリを作ったことにしてるわ。

$ mkdir TubeLocExam
$ cp -R TubeLoc_0.5.4/as3/lib/as2_tubeloc.swf \
TubeLoc_0.5.4/as3/src/com TubeLocExam
$ cd TubeLocExam

できたらソースを書くのね!
説明の都合もあるから、コピペできたコードを書いたら TubeLocExam.as として保存するのよ!!
コードの説明はコメントに書いてあるわ。
あんたもプログラマならそれぐらい自分で見なさい、自分で!!
ちなみにこのソース、TubeLocExam.as から DL できてよ。

package {
    import flash.display.*;
    import flash.events.*;
    import flash.text.*;
    import com.enefekt.tubeloc.*;
    import com.enefekt.tubeloc.event.*;

    [SWF(width="320", height="250", backgroundColor="#ffffff")]
    public class TubeLocExam extends Sprite {
	private var videoId:TextField;
	private var playButton:SimpleButton;
	private var youtubeMovie:MovieSprite;
	private var autoPlay:Boolean;

	// TubeLocExam クラスのコンストラクタだわ。
	// ここからすべてが始まるのね!
	public function TubeLocExam() {
	    stage.align = StageAlign.TOP_LEFT;
	    stage.scaleMode = StageScaleMode.NO_SCALE;

	    // videoID のラベルを表示ね!
	    var label:TextField = new TextField();
	    label.text = "videoID";
	    label.autoSize = TextFieldAutoSize.LEFT;
	    addChild(label);

	    // videoID の入力フィールドよ!
	    videoId = new TextField();
	    videoId.text = "RyjtW-rvWoQ";
	    videoId.width = 100;
	    videoId.height = label.height;
	    videoId.x = label.width + 5;
	    videoId.y = 0;
	    videoId.border = true;
	    videoId.background = true;
	    videoId.type = TextFieldType.INPUT;
	    videoId.useRichTextClipboard = true;
	    addChild(videoId);

	    // Play! ボタンね!
	    // 今日はどんな変態プレイしてくれるのかしら?!
	    var dstate:TextField = new TextField();
	    dstate.autoSize = TextFieldAutoSize.CENTER;
	    dstate.text = "Play!";
	    dstate.height = 17;
	    dstate.x = label.width + videoId.width + 10;
	    dstate.y = 0;
	    dstate.border = true;
	    dstate.background = true;
	    dstate.backgroundColor = 0xcccccc;

	    playButton = new SimpleButton(dstate, dstate, dstate, dstate);
	    playButton.addEventListener(MouseEvent.CLICK, onPlayButtonClick);
	    addChild(playButton);

	    // YouTube Player よ!
	    youtubeMovie = new MovieSprite("RyjtW-rvWoQ");
	    youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY,
					  onPlayerReady);
	    youtubeMovie.x = 0;
	    youtubeMovie.y = videoId.height + 5;
	    addChild(youtubeMovie);

	    // 最初は自動プレイさせないためのフラグよ!
	    autoPlay = false;
	}

	// YouTube Player が再生可能になったら呼ばれるイベントハンドラよ!
	private function onPlayerReady(e:PlayerReadyEvent):void {
	    youtubeMovie.width = 320;
	    youtubeMovie.height = 200 + MovieSprite.CHROME_HEIGHT;
	    if (autoPlay)
		youtubeMovie.playVideo();
	}

	// Play! ボタンがクリックされたときのイベントハンドラよ!
	private function onPlayButtonClick(e:MouseEvent):void {
	    youtubeMovie.stopVideo();
	    youtubeMovie.clearVideo();
	    youtubeMovie.loadVideoById(videoId.text);
	    autoPlay = true;
	}
    }
}

保存したらおもむろに mxmlc コマンド実行よ!!

$ mxmlc TubeLocExam.as

これでTubeLocExam.swf が出来上がるわ。
TubeLocExam.swf を呼び出すための HTML を書いてコーディングは終了よ。
これは exam.html ね。説明の都合よ!

<html>
  <body>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
      width="320" height="250">
      <param name="movie" value="TubeLocExam.swf" />
      <param name="quality" value="high" />
      <embed type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
        src="TubeLocExam.swf" width="320"  height="250"
        quality="high"></embed>
    </object>
  </body>
</html>

最後はできたファイルをアップロードするのね。
アップするのは exam.html TubeLocExam.swf as2_tubeloc.swf の3つよ。
全部サーバの同じディレクトリに置きなさい!
exam.html にアクセスして、上と同じアプリが動いたら完成よ!!


お疲れ様!!

さくら

P.S. 今度気が向いたときにでも TubeLoc ライブラリの説明を書くつもりよ。

4件のコメント »

  1. [...] 使い方はこちらが詳しいの。 http://sakuratan.biz/archives/416 Flexの話とか、コンソール的な話がでてきているけど、そこは考えずと、クラスパスを通すだけ。かんぴんす。 ※コンパイルしても [...]

    ピンバック by » flashでyoutubeプロモーション KNAP Blog — 2009 年 7 月 2 日 @ 02:16
  2. コメント by Vladimir Rybakov — 2014 年 1 月 4 日 @ 13:05
  3. This article will help the internet viewers for
    setting up new webpage or even a webhlog froim start to end.

    コメント by wordpress website — 2014 年 10 月 21 日 @ 10:00
  4. This page definitely has all the information I needed concerning this subject and
    didn’t know who to ask.

    コメント by Psycho-Pass 2 Soundtrack — 2015 年 8 月 16 日 @ 01:21

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2017 さくらたんどっとびーず | powered by WordPress with Barecity