feb19.jp

Nobuhiro Takahashi
Designer / Engineer

AS3 で Flash コンテンツに YouTube Player を埋め込む

AS3 で Flash コンテンツに YouTube Player を埋め込む

AS3 用の Google 公式 YouTube 埋め込みプレイヤー API が公開されました。いままでは AVM1 用プレイヤーか、JavaScript 経由で操作するクロムレスプレイヤーしか無かったので、これでかなり簡単に Flash サイト内で YouTube プレイヤーを埋め込むことができるようになりました。ただし Flash Player 10 以上。(一応 Player 9 でも動くけどエラー出ます)

とりあえず動くサンプルをごらんください。EmbedYoutubePlayerTest.html

Flash Player 10 用にパブリッシュされた、専用 YouTube プレイヤー SWF(http://www.youtube.com/apiplayer?version=3)をロードして、初期化(Event.INIT → "onReady" 後)再生用ファンクションをコールするだけのお手軽仕様。

YouTube ActionScript 3.0 Player API Reference - YouTube APIs and Tools - Google Code
http://code.google.com/intl/en/apis/youtube/flash_api_reference.html

再生用ファンクションは自動再生するかどうかと、ビデオ ID を指定するか URL を指定するかで、合計四種類あります。

指定する映像のサムネイルをロードし、映像再生の準備をする(スタートボタンが画面中央に表示したまま停止する)ファンクション。

// Video ID を指定
player.cueVideoById(videoId:String, startSeconds:Number, suggestedQuality:String):Void
// URL を指定
player.cueVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void

指定する映像をロードして自動的に再生開始するファンクション。

// Video ID を指定
player.loadVideoById(videoId:String, startSeconds:Number, suggestedQuality:String):Void
// URL を指定
player.loadVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void


というわけで上記サンプルのソース。

package 
{
	import flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.system.Security;
	
	/**
	 * Embded YouTube Player Test
	 */
	public class EmbedYoutubePlayerTest extends MovieClip
	{
		private var _youtubePlayer:Object;
		
		public function EmbedYoutubePlayerTest()
		{
			Security.allowDomain("*");
			
			var loader:Loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.INIT, initHandler);
			loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
		}
		private function initHandler(event:Event):void
		{
			_youtubePlayer = Loader(LoaderInfo(event.currentTarget).loader).content as Object;
			addChild(_youtubePlayer as DisplayObject);
			_youtubePlayer.addEventListener("onReady", onReadyHandler);
			_youtubePlayer.addEventListener("onError", onErrorHandler);
			_youtubePlayer.addEventListener("onStateChange", onStateChangeHandler);
			_youtubePlayer.addEventListener("onPlaybackQualityChange", onPlaybackQualityChangeHandler);
		}
		
		private function onReadyHandler(event:Event):void
		{
			trace("ready", Object(event).data);
			_youtubePlayer.setSize(320, 240);
			
			// キューする(スタートボタンが画面中央に表示したまま停止)
			//_youtubePlayer.cueVideoById("6hzrDeceEKc");
			
			// すぐさまロードして自動再生
			_youtubePlayer.loadVideoById("6hzrDeceEKc");
		}
		private function onErrorHandler(event:Event):void
		{
			// error 150 となる場合は、指定した映像が「埋め込み拒否」されている。(どうしようもない)
			trace("error", Object(event).data);
		}
		private function onStateChangeHandler(event:Event):void
		{
			// state -1 未スタート(SWFが読み込まれたときは -1 の onStateChange イベントが発行される)
			// state 0 終了
			// state 1 再生中
			// state 2 一時停止
			// state 3 バッファリング中
			// state 5 停止(SWF が読み込まれ、キューに追加されて、再生可能になったら 5 の onStateChange イベントが発行される)
			trace("state", Object(event).data);
		}
		private function onPlaybackQualityChangeHandler(event:Event):void
		{
			// クオリティを変更した場合
			trace("quality", Object(event).data);
		}
	}
	
}

公式ページではより詳しく解説していますので、要熟読。
コントローラー(再生ボタンやシークバー)を作るときは player.playVideo() や player.seekTo(seconds, allowSeekAhead) をコールするわけですね。

昔作ったサイトでは AVM1 用のクロムレスプレイヤーを JavaScript で操作するというかなりめんどくさくてクセがあった方法じゃないと埋め込めなかったので、いい時代になったなぁとしみじみ。

Navigation

prev: AS3 で SWFAddress 2.4 を使う ( Flash でブラウザの戻るボタン、パーマリンクに対応する )
next: Mac OS X 10.6 Snow Leopard で HP Photosmart C4380 を設定する

Recently Entries