이 도움말은 외부 개발자가 작성하여 제출했습니다. YouTube API팀은 시간을 내어 전문 지식을 제공해 주신 벤 롱고리아님께 감사드립니다.
벤 롱고리아, 위스콘신 대학교 매디슨, 학술 기술
2009년 2월
소개
그림 1: TubeLoc Chromeless 플레이어 데모
와우 이 글을 작성하는 시점에서 약 한 달 후면 YouTube Player API가 출시 1주년을 맞이합니다. 인터넷으로 환산하면 몇 년인가요? 이 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의 매시업)는 YouTube ActionScript 2 Player API의 어댑터 역할을 하는 ActionScript 3 라이브러리입니다. 전체 크롬 또는 크롬이 없는 YouTube 플레이어를 사용하여 ActionScript 3 또는 Flex 애플리케이션에 YouTube 동영상 기능을 쉽게 추가할 수 있습니다. TubeLoc은 ActionScript 2 미디에이터 SWF와 통신할 때 LocalConnection 클래스를 사용합니다. 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 사용
TubeLoc의 Flex 버전을 사용하는 방법을 살펴보겠습니다. 먼저 모든 컨트롤이 있는 전체 Chrome 플레이어를 살펴본 다음 BYOC Chromeless 플레이어를 살펴보겠습니다. 다음은 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 네임스페이스를 추가합니다. 이렇게 하면 위와 같이 구성요소를 사용할 수 있습니다. 나중에 이 구성요소를 설정하고 호출하는 데 사용할 수 있는 항목을 살펴보겠습니다.
MovieSprite.as 사용
이제 TubeLoc의 ActionScript 3 버전을 사용하는 방법을 알아보겠습니다. 이 버전은 Flex 프레임워크의 클래스가 필요하지 않으며 Flash Player 네이티브 클래스만 사용합니다. 먼저 전체 Chrome 플레이어를 실행하는 방법을 살펴본 다음 Chromeless 플레이어를 실행하는 방법을 살펴보겠습니다. 다음은 전체 예입니다.
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");
}
}
}
그렇다면 어떤 차이가 있나요? 생성자에서 동영상 ID에 null를 전달하고 두 번째 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 플레이어를 두 개 이상 배치할 수 없습니다.
조만간 이 문제가 해결되기를 바랍니다. 버그나 누락된 기능을 발견하면 Google Code 프로젝트를 방문하여 Issue Tracker에 신고해 주세요. 읽어 주셔서 감사합니다.
저자 약력
벤 롱고리아는 위스콘신대학교 매디슨의 학술 애플리케이션 개발자입니다. Flash 5부터 Flash로, Flex 2 출시 이후 Flex로 개발해 왔습니다. 지난 2년간 Mozilla 기반 애플리케이션도 개발해 왔습니다. 벤은 브라우저와 데스크톱을 모두 타겟팅하는 크로스 플랫폼 애플리케이션을 비롯한 여러 교육 및 학술 프로젝트에 참여했습니다. 인터페이스 및 상호작용 디자인에 적극적으로 참여하고 있으며 사용 가능한 소프트웨어를 만드는 도전을 즐깁니다. 그의 블로그는 http://enefekt.com/sansbrowser/에서 확인할 수 있으며 InsideRIA에 기고한 글을 읽을 수 있습니다.
이 저작물은 크리에이티브 커먼즈 저작자 표시 3.0 미국 라이선스에 따라 이용할 수 있습니다.