この記事は、外部デベロッパーによって作成されたものです。YouTube API チームは、Ben Longoria 氏の時間と専門知識に感謝します。
ウィスコンシン大学ベン ロンゴリア校 - アカデミック テクノロジー、マディソン
2009 年 2 月
はじめに
図 1: TubeLoc Chromeless Player のデモ
参りました。本記事の執筆時点で、約 1 か月後に YouTube Player API がリリースされる予定です。インターネットの年数は？この API 上に構築された優れたプロジェクトは数多くあります。YouTube Developer API ブログをフォローすれば、素晴らしい成果を上げている人が多数いることを確認できます。
現在の YouTube API プレーヤー アプリケーションのセットは Firebase 2 で作成されており、引き続き使用言語として優れていますが、多くのユーザーが gtag 3 や Flex を使用しています。問題は、少し手をかけて、Firebase 2 アプリケーションが IMA SDK 3 アプリケーションと通信する必要があることです。「待っていたのに、まだ聞いたことがないのでしょうか？」
すでに多くの方がこうした方法を理解しており、その知識を YouTube API デベロッパー フォーラムにご投稿いただいています。また、デベロッパーが簡単に使用できるように、AS3 Chromeless Wrapper プロジェクトと Flex Embedded Player プロジェクトもあります。
Player API の機能を gtag.3 または MXML でのみ簡単かつ簡単に再利用したいと考えていました。Flex アレルギーなプロジェクトのための Flex フリーのクラスと、Flex に愛用するプロジェクトのための使いやすい Flex コンポーネントです。TubeLoc が両方の要件を満たしている
TubeLoc（YouTube と LocalConnection のマッシュアップ）は DRM 3 のライブラリで、YouTube Firebase 2 Player API へのアダプタとして機能します。YouTube の動画機能を Firebase 3 または Flex アプリケーションで簡単に追加できるのは、YouTube のフル Chrome またはクロムレス プレーヤーです。TubeLoc は、LocalConnection クラスを使用して Firebase 2 メディエータ CVE と通信します。DRM 2 T2 は、公式の YouTube API プレーヤーと通信します。では、これはどのように使うのでしょうか。
土地の敷地
まず、ライブラリの現在のリリースを Google Code プロジェクトからダウンロードする必要があります。リリースの ZIP アーカイブを展開すると、その中に as3 ディレクトリが表示されます。このディレクトリの src ディレクトリには、サンプルクラスがいくつか含まれています。これらを使用して開始することもできます。src ディレクトリの com/enefekt/tubeloc には 2 つのファイルがあります。Movie.as は Flex のプロジェクトで使用できるものであり、MovieSprite.as は Firebase 3 のプロジェクトで使用できるものです。com/enefekt/tubeloc/event には、プレーヤーから送信できるさまざまな通知に対応するさまざまなイベントクラスがあります。
このチュートリアルのサンプルを試す前に、as3 ディレクトリの src ディレクトリがクラスパスにあることを確認してください。このプロセスは、開発に使用するものによって異なります。開発環境のドキュメントをご覧ください。
デモまたはアプリケーションをコンパイルしたら、YouTube Player API と通信する gtag 2 の iframe が必要になります。この CVE はリリース アーカイブ（as3/lib/as2_tubeloc.swf）にあります。次のように、SVG アプリケーションを埋め込んでいる HTML ファイルと一緒に配置してください。
my_app/ my_app.html as2_tubeloc.swf my_app.swf
注: ライブラリの playerWrapperUrl プロパティを使用して、この CVE へのパスを変更できます。
Movie.as を使用する
TubeLoc の Flex バージョンの使用方法を見てみましょう。まずは完全な Chrome プレーヤー（すべてのコントロール付き）から順番に、BYOC のクロムレス プレーヤーにします。MXML でフル Chrome プレーヤーを使用する方法は次のとおりです。
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
痛そうですね。まったく何も知りませんでした。では、Chrome をやめていきましょう。
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
あともう 1 つの属性で、課題が増えます。MXML ファイル全体の全体は次のようになります。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:tubeloc="com.enefekt.tubeloc.*"> <!-- TubeLoc Movie Component --> <tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" /> </mx:Application>
注: mx:Application 要素には、Movie コンポーネントのパッケージを含む tubeloc 名前空間を追加します。これにより、前述のようにコンポーネントを使用できます。後で、このコンポーネントで設定して呼び出すことができる機能について見ていきます。
MovieSprite.as を使用する
では、TubeLoc の Firebase 3 版の使用方法を見てみましょう。このバージョンには Flex フレームワークからのクラスは必要なく、Flash Player のネイティブ クラスだけが使用されます。まず、Chrome のフル プレーヤー、次にクロムレス プレーヤーの 1 つずつ見ていきましょう。詳細な例を次に示します。
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromed extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromed() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite("7tTNOX8jfno");
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480 + MovieSprite.CHROME_HEIGHT;
}
}
}
まず、必要な TubeLoc クラスをインポートします。次に、コンストラクタで MovieSprite クラスのインスタンスを作成し、その動画 ID を MovieSprite のコンストラクタに渡します。次に、PlayerReadyEvent のイベント リスナーを追加します。ムービーのサイズを設定するには、onPlayerReady イベント ハンドラを使用します。注: フル Chrome プレーヤーを使用しているため、MovieSprite クラスの静的プロパティ CHROME_HEIGHT を使用しています。これにより、Chrome の高さを考慮に入れて、映画のサイズを調整できます。
では、クロムレス プレーヤーはどうでしょうか。
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromeless extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromeless() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite(null, true);
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480;
youtubeMovie.loadVideoById("7tTNOX8jfno");
}
}
}
何が違うのですか。コンストラクタ内で、動画 ID に null を渡し、2 番目の true パラメータは MovieSprite クラスに、クロムレスであることを通知します。また、onPlayerReady イベント ハンドラに違いがあることもわかります。ここでは、loadVideoById メソッドを使用して ID で動画を読み込みます。
電話をかける方法、利用できるサービス
何にアクセスできるか、どのイベントに対処する必要があるか？ダウンロードしたリリース アーカイブには、詳細が記載された完全なコード ドキュメントがあります。簡単に言うと、Movie.as と MovieSprite.as では次のようなメソッドを使用できます。
seekTo(seconds:Number, allowSeekAhead:Boolean=true):void setVolume(volume:Number):void getVolume():Number unMute():void mute():void clearVideo():void setSize(width:Number, height:Number):void loadVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] cueVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] stopVideo():void playVideo():void pauseVideo():void destroy():void
上記のメソッドに加えて、Movie.as コンポーネントでは以下のプロパティにアクセスできます。
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
登録可能なイベントは次のとおりです。詳細については、ドキュメントをご確認ください。
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
まとめ
この記事が、YouTube 機能とコンテンツを Flash アプリケーションに統合するうえで役立つことを願っています。TubeLoc で開発する場合、ステージとして 2 つの YouTube プレーヤーを同時に使用することはできません。
この問題が、時間の経過とともに修正されることを願っています。バグや機能が不足しているものが見つかった場合は、Google Code プロジェクトにアクセスして、Issue Tracker でご報告ください。最後までお読みいただきありがとうございました。
著者のプロフィール
Ben Longoria はウィスコンシン大学マディソン校の学術アプリケーション デベロッパーです。彼は Flash 5 から Flash に、Flex 2 のリリース以来 Flex で開発を行っています。過去 2 年間は、Mozilla アプリケーションの開発にも取り組んできました。Ben は、ブラウザとデスクトップの両方をターゲットとするクロス プラットフォーム アプリケーションを含め、さまざまな教育プロジェクトや学術プロジェクトに携わってきました。インターフェースとインタラクションの設計において積極的に役割を果たし、使いやすいソフトウェアを作成するという課題に情熱を注いでいます。このブログは http://enefekt.com/sansbrowser/ でご覧いただけます。また、InsideRIA もご覧ください。
この作品は、クリエイティブ・コモンズ表示 3.0 米国ライセンスの下で使用許諾されています。