本文由外部开发者撰写并提交。YouTube API 团队感谢 Ben Longoria 抽出宝贵时间与我们分享专业知识。
Ben Longoria，威斯康星大学麦迪逊分校，学术技术
2009 年 2 月
简介
图 1：TubeLoc 无 Chrome 播放器演示
哇。距离本文撰写之时，YouTube Player API 已发布一年。这相当于多少互联网年？许多优秀的项目都是基于该 API 构建的。您只需关注 YouTube Developer API 博客，就能发现有许多人通过该 API 取得了出色的成就。
目前的 YouTube API 播放器应用是使用 ActionScript 2 编写的，虽然这仍然是一门非常实用的语言，但许多人现在都使用 ActionScript 3 和/或 Flex。问题在于，您必须完成一些繁琐的步骤，才能让 ActionScript 2 应用与 ActionScript 3 应用进行通信。您可能会问：“等等…我好像听过这个，不是已经有相关功能了吗？”
许多开发者已经找到了解决方法，并在 YouTube API 开发者论坛中分享了他们的经验。此外，我们还提供了 AS3 Chromeless Wrapper 和 Flex Embedded Player 项目，以便开发者更轻松地使用此功能。
我希望能够以一种简单的方式，仅在 ActionScript 3 或 MXML 中重复使用 Player API 功能。一个不含 Flex 的类，适用于对 Flex 过敏的项目；一个易于使用的 Flex 组件，适用于喜欢 Flex 的项目。TubeLoc 满足这两项要求
TubeLoc（YouTube 和 LocalConnection 的混搭）是一个 ActionScript 3 库，可用作 YouTube ActionScript 2 Player API 的适配器。您可以使用全 Chrome 或无边框 YouTube 播放器，轻松将 YouTube 视频功能添加到 ActionScript 3 或 Flex 应用中。TubeLoc 使用 LocalConnection 类与 ActionScript 2 中介 SWF 进行通信。ActionScript 2 SWF 与官方 YouTube API 播放器进行通信。那么，我们该如何使用以下功能？
当前形势
首先，您应从 Google Code 项目下载该库的当前版本。解压缩该版本的 ZIP 归档文件后，您会在其中找到一个 as3 目录。下方是 src 目录，其中包含一些示例类。您可以将这些信息作为起点。src 目录中的 com/enefekt/tubeloc 下有两个文件。Movie.as 适用于 Flex 项目，MovieSprite.as 适用于 ActionScript 3 项目。在 com/enefekt/tubeloc/event 中，有各种事件类，用于处理可从玩家发送的不同通知。
在尝试本教程中的示例之前，请确保 as3 目录中的 src 目录位于您的类路径中。具体操作步骤因开发工具而异，因此请参阅您的开发环境的文档。
编译演示版或应用后，您需要使用与 YouTube Player API 通信的 ActionScript 2 SWF。您可以在此处的版本归档中找到此 SWF：as3/lib/as2_tubeloc.swf。只需确保它与嵌入 SWF 应用的 HTML 文件放在一起即可，如下所示：
my_app/ my_app.html as2_tubeloc.swf my_app.swf
注意：您可以使用库中的 playerWrapperUrl 属性更改此 SWF 的路径。
使用 Movie.as
我们来看看如何使用 Flex 版 TubeLoc。我们先来看看全 Chrome 播放器（包含所有控件），然后再看看 BYOC 无控件播放器。在 MXML 中使用全 Chrome 播放器的方式如下：
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
我知道，我知道，很痛苦，对吗？不客气！让我们来试试无边框效果：
<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 命名空间以及 Movie 组件的软件包。完成后，我们可以按演示所示使用该组件。稍后，我们将了解可以对此组件进行哪些设置和调用。
使用 MovieSprite.as
现在，我们来看看如何使用 ActionScript 3 版的 TubeLoc。此版本不需要 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 事件处理脚本中，我们设置了影片的大小。注意：由于我们使用的是全 Chrome 播放器，因此我们将利用 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");
}
}
}
那么，具体有哪些变化呢？在构造函数中，我们将 null 作为视频 ID 传递，第二个 true 参数告知 MovieSprite 类我们将采用无框架模式。您还会发现 onPlayerReady 事件处理脚本有所不同。在这里，我们将使用 loadVideoById 方法按 ID 加载视频。
我可以拨打哪些电话？可以获得哪些帮助？
那么，我们可以调用哪些内容，以及需要处理哪些事件？您下载的版本归档中包含完整的代码文档，其中包含详细信息。下面简要介绍了 Movie.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
总结
希望本文能帮助您在 Flash 应用中集成 YouTube 功能和内容。使用 TubeLoc 进行开发时，请注意以下限制：您无法同时在舞台上显示两个 YouTube 播放器。
希望此问题能及时得到解决。因此，如果您发现 bug 或缺少某些功能，请访问 Google Code 项目，并在问题跟踪器中报告问题。感谢您的阅读！
作者简介
Ben Longoria 是威斯康星大学麦迪逊分校的学术应用开发者。自 Flash 5 发布以来，他一直在使用 Flash 进行开发；自 Flex 2 发布以来，他一直在使用 Flex 进行开发。在过去 2 年里，他还开发了一些采用 Mozilla 技术的应用。Ben 曾参与多个教育和学术项目，包括面向浏览器和桌面的跨平台应用。他积极参与界面和交互设计，并乐于接受打造易用软件的挑战。您可以访问 http://enefekt.com/sansbrowser/ 查看他的博客，也可以阅读他在 InsideRIA 上发表的文章。
此作品已获得 Creative Commons Attribution 3.0 United States License 许可。