YouTube Chromeless Player API 正式支持 ActionScript 3

20十一2009 Filed under: Youtube Player API Author: Alvin / Aedis.Ju 将文章转换为简体

這次 YouTube Chromeless Player API 對 ActionScript 3 的支持堪稱完美了！
首先，回顧之前常用的 Youtube Player API，來個部分總結：

youtubechromelesswrapper-as3
youtubechromelesswrapper-as3 的原理是利用 ActionScript’s ExternalInterface class & YouTube’s JavaScript API 進行交互。
查看它的原始碼可以看出它 Loading 的 Youtube Player 地址。

//Loading youtube 的 apiplayer，并且設置可以與 Javascript 互動。
private static const CHROMELESS_PLAYER_URL:String="http://www.youtube.com/apiplayer?enablejsapi=1"
...
_loader = new Loader();
//_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
_loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
_loader.load(new URLRequest(CHROMELESS_PLAYER_URL));

Event.COMPLETE 在這里并不起作用，因此需要通過 ExternalInterface class & JavaScript來判斷相應的 SWF-DIV 來告知CHROMELESS_PLAYER_URL 是否Loading成功，而在Flash里面的每次操作，也是由 ExternalInterface class & JavaScript 來互相控制。
這樣一來，缺點顯而易見：

只能選用Chromeless Youtube Player
判斷 CHROMELESS_PLAYER_URL 是否 Loading 成功的方式感覺到很奇怪。
JS 禁用的條件下，youtubechromelesswrapper-as3 肯定無法操作。
多個播放器無法操作。

A full article and code overview is available here:
http://code.google.com/apis/youtube/articles/youtube_as3_chromeless.html

Sample Source Code:
ActionScript_3_YouTube_Wrapper_v1.0.zip

TubeLoc
個人曾經強烈推薦過的 Youtube Player 連接方式。
TubeLoc 是 AS2 YouTube Player API 的 AS3/Flex Proxy Library，原理是采用 localConnection 利用 ActionScript 2 編碼的 SWF (as2_tubeloc.swf) 與 the YouTube Player API 進行通信，整個過程不需要 JS 的支持，并且支持 Full-Chrome player & Chromeless player。
缺點：
1. localConnection 連接會有可能 Connection Channel 被占用，無法造成鏈接。
2. localConnection 的send()方式數據量限制為40個字節，否則引發 ArgumentError（一般不會發生，但畢竟還是由此限制呀）。
3. 多個播放器無法操作。
更多參考：
http://code.google.com/intl/en/apis/youtube/articles/tubeloc.html

最近再次查看 Youtube Player API

Wednesday, October 14, 2009
the official YouTube Chromeless Player API has been updated to natively support ActionScript 3!
…

讓我眼前一亮。

這次 Youtube 的更新支持 YouTube Chromeless Player 不再需要通過 JS 或者 localConnection 的方式進行通信連接，直接采用 ActionScript3 的內部方式。

1
2
3

//注意這次的地址，后面加了參數version = 3。
//如果沒有這個version=3的參數，那么 YouTube Chromeless Player API 將無法使用的
private static const CHROMELESS_PLAYER_URL:String="http://www.youtube.com/apiplayer?version=3";

而檢測 Player 是否成功載入的方式采用的是它本身內部的監聽，目前提供了：
“onReady” – 載入成功
“onError” – 載入異常
“onStateChange” – 播放器狀態改變
“onPlaybackQualityChange” – 播放器影片載入質量改變

_youtubeLoader.content.addEventListener("onReady", onPlayerReady);
_youtubeLoader.content.addEventListener("onError", onPlayerError);
_youtubeLoader.content.addEventListener("onStateChange", onPlayerStateChange);
_youtubeLoader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);

而使用方法，也是在 _youtubeLoader 在完全 Loading 完成 youtubePlayer 以后，直接進行調用

/**
 * loadByURL
 * @param url YouTube player URL in the format http://www.youtube.com/v/VIDEO_ID.
 * @param seconds
 */
public function loadByURL(url:String, seconds:Number = 0):void
{
	if (youtubePlayer)
	{
		if (_autoPlay)
		{
			//Loads and plays the specified video.
			youtubePlayer.loadVideoByUrl(url, seconds);
		}
		else
		{
			//The player does not request the FLV until playVideo() or seekTo() is called.
			youtubePlayer.cueVideoByUrl(url, seconds);
		}
	}
}

而且經過測試，可以支持多個播放器同時播放。
本人也寫了個 AS3 的類供大家玩耍（因為要連接 Youtube.com，所以國內的同學請繞墻），可以參考源代碼。
http://code.richmediaplus.com/ChromelessYoutubePlayerAS3/ChromelessYoutubePlayerAS3App.html
SourceView:http://code.richmediaplus.com/ChromelessYoutubePlayerAS3/srcview/

更多參考（國內的同學請注意跳轉地址）：
http://code.google.com/intl/en/apis/youtube/flash_api_reference.html

至于 Full-Chrome player 的這一塊，經本人測試，如果loading的地址采用的是”http://www.youtube.com/v/VIDEO_ID?version=3″，那么loading襲來的swf照樣可以支持目前提供的API，但是因為Flash security的限制，DEBUG版本播放器下會報錯誤，但是普通版本可以測試通過。畢竟 Full-Chrome player 的 API 還沒有正式提供，所以也不建議大家使用。

真的播放器在 http://s.ytimg.com/yt/swf/watch_as3.swf 這里啊，但是人家限制域啦！