feb19.jp blog - life is creative!

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

ブックマークに追加する tags:    

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 で操作するというかなりめんどくさくてクセがあった方法じゃないと埋め込めなかったので、いい時代になったなぁとしみじみ。

2009年10月16日18:23

Webデザインブログ

「AS3 で Flash コンテンツに YouTube Player を埋め込む」の関連エントリー

 iTunes Store(Japan)

コメント (5)

steneco:

いつも拝読させていただいております!

ちょっとご質問なのですが、player9のエラーというのは具体的にどのようなものか教えてもらってよろしいでしょうか??

私の方で試した感じだと問題無く使えるようですので…。

リファレンスを確認してみても推奨環境は 9 以降にはなってはいるんですよね。。。

とつぜんの質問ですみません…。

stenecoさん
すいません、そこはちゃんとかくべきでしたね。
表示されたエラーというのは、下記のようなものでした。

Flash Player 10 環境で、 Flash Player 9 パブリッシュしたときに、 Flash CS4 の「出力」パネルに表示される結果:

ready
state -1
quality medium
URL 'http://www.youtube.com/get_video?t=vjVQa1PpcFOlZ6C-LmrPZQseKhsmZgTSL6-yleeKQxc=&ps=chromeless&video_id=6hzrDeceEKc&noflv=1&splay=1&fmt=34&el=embedded' を開く処理のエラー
state 3
state 1
URL 'http://video-stats.video.google.com/s?splay=1&bt=1.672&et=0.2&vid=p7MDulFZFw00eyE5Gz_RIS291kpNVZmpC&plid=&rt=2.479&len=280&bc=267993&hbd=4234760&fexp=904804,903913&nbe=1&docid=6hzrDeceEKc&el=embedded&md=1&st=0.2&cfps=0&ns=yt&sd=B4A7D6B48 &fv=WIN 10,0,22,91&ps=chromeless&bd=266016&w=320&hbt=43.659&h=240&fmt=34&scoville=1' を開く処理のエラー

ちなみにFlash Player 10 環境で、 Flash Player 10 パブリッシュしたときに、 Flash CS4 の「出力」パネルに表示される結果:

ready
state -1
quality medium
state 3
state 1

エラーが出ていないのがお分かりいただけると思います。

前者は、読み込む映像は最近の Youtube の主流となっている f4v(mp4?)に Flash Player 9 が対応していないために発生するものだと思います。

steneco さんが Flash Player 9 で表示されたのは、指定したコンテンツは flv のみだった、または API 側で画質を自動で切り替える処理があるようで、エラーが発生したら flv にする的な処理が行っているようなので、エラーは出ているけど代替の映像が見えている、ということなのかもしれません。

ちなみに API で読み込まれるプレイヤー(http://www.youtube.com/swf/apiplayer3.swf)は、バイナリを見る限り Flash Player 10 用にパブリッシュされているようなので、 Flash Player 9 で使用できないクラスやメソッドなどが使われている可能性があるので、 Flash Player 9 で使うのはちょっと危険かもしれません。

ただ実際、リファレンスには
> Requirements
> The end user must have Flash Player 9 or higher installed to view everything correctly.
って書かれているんですよね。僕も認識していますが、 Flash Player 9 しか入っていない人は自動的に画質が flv 用のものを再生するような仕様(別の swf を読み込むよう)にしているのかもしれませんね。

なので、上記エラーは、マシンに Flash Player 10 が入っている場合、 Flash Player 9 パブリッシュされたものを見た時に起きる現象なのかもしれません。

以上、僕の推論です。信用はあまりしないでください。笑

真相は Youtube API を作っている Google さんに問い合わせて、
メールなりでお伝えいただけると助かります。ww

ЎUf, me gustу! Tan clara y positiva.

Worker

Greatings, ЎGracias! Ahora me irй en este blog cada dнa!

Dolly

Hola,
їPuedo tomar Foto de su sitio

Truden

コメントを投稿

トラックバック

このエントリーのトラックバックURL:
http://feb19.jp/mt/mt-tb.cgi/182

Navigation

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

Recently Entries
Mac でファイルの関連付けを変える(Mac で AIR アプリがアップデート出来ないを解決する方法)
ファイルを右クリックして「情報を見る」を選び、表示されたウィンドウの...
Mac OS X 10.6 Snow Leopard から入ってるフォント「Menlo」がコーディング作業にいい感じ
Xcode でコード書いているとき、Eclipse でコード書くより...
AIR で JSON 形式ファイルの入出力
AIR 祭り開催中。今回はファイル入出力。AS3 で扱っている Ob...
Adobe CS5 ティザーサイトオープン
カウントダウンが始まっています。いよいよ CS5 ですね。globa...
AIR でファイルがドラッグアンドドロップされたことを NativeDragEvent で検知する
最近また AIR が楽しい気がして触っているのですが、 Google...
iPhone アプリ "iBeat - BPM Counter" を発売しました & iPhone インタラクションデザインについて
BPM 計測アプリです。既に似たようなアプリはいくつか発売されている...
AS3 の演算子 ||= について
AS3 だけでつかえるものではないのですが、AS3 での動作を確認し...
iPhone SDK 「カテゴリ」について+NSString の空白文字を除去する
Objective-C では、高位のフレームワークで、低位のフレーム...
Flash CS4 で Flex SDK (mx パッケージ、クラス) を使う
Flex 用のライブラリとかを見ると mx パッケージとか使われてい...
Flash CS5 を予習 ~Text Layout Framework (TLF) 編~
Text Layout Framework (TLF) を使って、F...