本文由外部开发者编写和提交。 YouTube API 团队感谢 Ben Longoria 所投入的时间和提供的专业知识。
Ben Longoria，威斯康星大学 - 学术技术麦迪逊分校
2009 年 2 月
简介
图 1：TubeLoc Chromeless Player 演示
哇哦！截至撰写本文时，YouTube 播放器 API 大约将一个月左右。那是几年的互联网时间？基于该 API 构建了许多优秀的项目。只需关注 YouTube Developer API 博客，即可看到大量用户都做出了贡献。
当前的 YouTube API 播放器应用是用 Action 2 编写的，虽然这仍然是一个值得使用的语言，但现在很多人都在使用 ActionScript 3 和/或 Flex。问题在于，您必须快速进行一些操作，才能使 Actions 2 应用与 Actions 3 应用进行通信。“但等一下，我以前听过这种说法，是不是已经有事了？”
很多人已经思考如何做到这一点，还真诚地向 YouTube API 开发者论坛中展现自己的智慧。我们还推出了 AS3 Chromeless 封装容器和 Flex 嵌入式播放器项目，以便让开发者更轻松地使用这一项目。
我想简单快速地在 Player 3 或 MXML 中重复使用 Player API 功能。一个适用于这些 Flex 过敏项目的 Flex 免费类，以及一个适用于这些 Flex 项目的易用 Flex 组件。TubeLoc 同时满足两个要求
TubeLoc（YouTube 和 LocalConnection 的混搭）是一个 ActionScript 3 库，可用作 YouTube Action 2 Player API 的适配器。无论是在 YouTube 上，还是在无边框 YouTube 播放器中，您都可以轻松地将 YouTube 视频功能添加到 Action 3 或 Flex 应用中。TubeLoc 使用 LocalConnection 类与 Action 2 调解器 {4/} 进行通信。Action 2 {4/} 会与官方 YouTube API 播放器通信。那么，我们该如何利用以下呢？
《Lay of the Land》
首先，您应从 Google 代码项目下载该库的当前版本。解压缩版本 zip 归档文件后，您会在其中找到 as3 目录。这是 src 目录，其中包含一些示例类。您可以从这些示例入手。在 src 目录下的 com/enefekt/tubeloc 下，有两个文件。Movie.as 可在 Flex 项目中使用，MovieSprite.as 则可用于 Action 3 项目中。在 com/enefekt/tubeloc/event 中，有各种事件类，适用于可从播放器发送的不同通知。
在试用本教程中的示例之前，请确保 as3 目录中的 src 目录位于类路径中。此操作的具体步骤取决于您使用的内容进行开发，因此请查看与您的开发环境相关的文档。
编译演示版或应用后，您需要与 YouTube Player API 通信的 Action 2 {4/}。您可以在以下版本的归档归档中找到此 {4/}：as3/lib/as2_tubeloc.swf。只需确保该文件位于嵌入您的 Flash 应用的 HTML 文件旁边，如下所示：
my_app/ my_app.html as2_tubeloc.swf my_app.swf
注意：您可以使用 playerWrapperUrl 属性更改此库的路径。
使用 Movie.as
我们来看看如何使用 Flex 版本的 TubeLoc。我们先来看一下全色色播放器（包含所有控件），然后是 BYOC 无控件播放器。在 MXML 中，使用全色播放器的方法如下：
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
我知道，很痛苦，对吧？一点也不！所以，我们疯了吧，做 Chromeless：
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
我们再增加一个属性，就是这样。整个 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 元素中，我们将 tubeloc 命名空间与电影组件的软件包一起添加。完成此操作后，我们可以使用演示的组件。稍后，我们将了解可对此组件设置和调用的内容。
使用 MovieSprite.as
现在，我们来看看如何使用 TubeLoc 的 Action 3 版本。此版本不需要来自 Flex 框架的类，并且仅使用 Flash Player 原生类。我们先来看看如何操作全 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 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 事件处理脚本中，我们设置影片的大小。注意：由于我们使用的是全色播放器，因此会利用 MovieSprite 类上的静态属性 CHROME_HEIGHT。这有助于我们根据影片的高度来调整影片的大小。
那么，无控件播放器怎么样？
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，第二个 true 参数会告知 MovieSprite 类我们要设置无控件。您还会发现，onPlayerReady 事件处理脚本之间存在差异。这里我们使用 loadVideoById 方法按 ID 加载视频。
我可以拨打哪些信息？我能获得什么？
那么，我们都有哪些可以通话的对象，我们必须要处理哪些事件呢？在您下载的 Release 归档中，有完整的代码文档可帮助您获取详细信息。我们来快速了解一下 Movies.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 进行开发时，请注意以下限制：您不能同时在场景中使用两个 YouTube 播放器。
希望上述问题能及时得到解决。因此，如果您发现 bug 或缺少某些功能，请访问 Google 代码项目，并在问题跟踪器中报告此问题。感谢阅读！
作者个人简介
Ben Longoria 是威斯康星大学麦迪逊分校的学术应用开发者。他从 Flash 5 开始用 Flash 开发，从 Flex 2 版本开始用 Flex 开发。在过去的两年里，他也一直在开发由 Mozilla 提供支持的应用。Ben 参与了大量教育和学术项目，包括同时针对浏览器和桌面设备的跨平台应用。他在界面和互动设计方面发挥了积极作用，喜欢开发易于使用的软件。您可以访问 http://enefekt.com/sansbrowser/ 查看他的博客，并阅读他为 InsideRIA 所做的贡献。
本作品已获得知识共享署名 3.0 美国许可。