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


コメント (5)
いつも拝読させていただいております!
ちょっとご質問なのですが、player9のエラーというのは具体的にどのようなものか教えてもらってよろしいでしょうか??
私の方で試した感じだと問題無く使えるようですので…。
リファレンスを確認してみても推奨環境は 9 以降にはなってはいるんですよね。。。
とつぜんの質問ですみません…。
投稿者: steneco | 2009年10月20日 18:54
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
投稿者: feb19 | 2009年10月23日 14:07
ЎUf, me gustу! Tan clara y positiva.
Worker
投稿者: Worker | 2010年02月18日 01:37
Greatings, ЎGracias! Ahora me irй en este blog cada dнa!
Dolly
投稿者: Dolly | 2010年02月26日 14:24
Hola,
їPuedo tomar Foto de su sitio
Truden
投稿者: Truden | 2010年04月04日 02:40