이 도움말은 외부 개발자가 작성하고 제출했습니다. YouTube API팀은 벤 롱고리아에게 박수를 보냅니다.
Ben Longoria, 위스콘신 대학 - Madison, Academic Technology
2009년 2월
소개
그림 1: TubeLoc Chromeless 플레이어 데모
신기한데요. 이 글을 작성하는 시점 기준으로, YouTube Player API는 출시된 지 1년 정도 되었습니다. 몇 년이나 남았나요? API를 기반으로 우수한 프로젝트가 여러 개 빌드되었습니다. YouTube Developer API 블로그를 팔로우하기만 하면 훌륭한 기능을 구현한 사용자가 얼마나 많은지 확인할 수 있습니다.
현재 YouTube API 플레이어 애플리케이션 세트는 액션스크립트 2로 작성되었으며 이 API도 여전히 사용하기 좋은 언어이지만 많은 사람들이 현재 액션스크립트 3 또는 Flex를 사용하고 있습니다. 문제는 액션스크립트 2 애플리케이션이 액션스크립트 3 애플리케이션과 통신하도록 하기 위해 몇 가지 단계를 거치게 되는 것입니다. "그런데 이 내용은 이미 들으신 것 같습니다. 아직 말씀하신 내용이 없나요?"
이미 이런 방법을 찾으신 많은 분께서 YouTube API 개발자 포럼에 지혜를 남겨주셨습니다. 개발자가 더 쉽게 사용할 수 있도록 AS3 Chromeless Wrapper와 Flex Embedded Player 프로젝트도 있습니다.
액션스크립트 3 또는 MXML에서만 Player API 기능을 재사용할 수 있는 쉽고 간편한 방법을 원했습니다. 이러한 Flex 알레르기 프로젝트를 위한 Flex 무료 클래스와 Flex를 사랑하는 프로젝트를 위한 간편한 Flex 구성요소입니다. TubeLoc은 두 요구사항을 모두 충족함
TubeLoc (YouTube 및 LocalConnection의 매시업)은 YouTube 액션스크립트 2 Player API의 어댑터 역할을 하는 액션스크립트 3 라이브러리입니다. 전체 Chrome 또는 Chromeless YouTube 플레이어를 사용하여 YouTube 동영상 기능을 액션스크립트 3 또는 Flex 애플리케이션에 쉽게 추가할 수 있습니다. TubeLoc은 LocalConnection 클래스를 사용하여 액션스크립트 2 미디에이터 KML과 통신합니다. 액션스크립트 2 CMS는 공식 YouTube API 플레이어와 통신합니다. 그렇다면 어떻게 사용해야 할까요?
땅의 아름다움
먼저 Google 코드 프로젝트에서 라이브러리의 현재 출시 버전을 다운로드해야 합니다. 출시 ZIP 보관 파일의 압축을 푼 후 안에 as3 디렉터리가 있습니다. 그 아래에는 샘플 클래스가 있는 src 디렉터리가 있습니다. 이를 시작점으로 사용하세요. src 디렉터리의 com/enefekt/tubeloc 아래에 파일이 두 개 있습니다. Movie.as는 Flex 프로젝트에서 사용할 수 있으며 MovieSprite.as는 액션스크립트 3 프로젝트에서 사용할 수 있습니다. com/enefekt/tubeloc/event에는 다양한 알림에서 플레이어로부터 보낼 수 있는 다양한 이벤트 클래스가 있습니다.
이 튜토리얼의 예시를 시도하기 전에 as3 디렉터리의 src 디렉터리가 클래스 경로에 있는지 확인합니다. 이를 수행하는 프로세스는 개발에 사용하는 항목에 따라 다르므로 개발 환경에 대한 문서를 확인하세요.
데모 또는 애플리케이션을 컴파일한 후에는 YouTube Player API와 통신하는 액션스크립트 2 CMS가 필요합니다. 이 출시는 as3/lib/as2_tubeloc.swf의 출시 보관 파일에서 찾을 수 있습니다. 아래와 같이 해당 파일이 HTML 애플리케이션을 삽입하는 HTML 파일과 함께 위치하는지 확인합니다.
my_app/ my_app.html as2_tubeloc.swf my_app.swf
참고: 라이브러리와 함께 playerWrapperUrl 속성을 사용하여 이 CVE의 경로를 변경할 수 있습니다.
Movie.as 사용
TubeLoc의 Flex 버전을 사용하는 방법을 살펴보겠습니다. 먼저 모든 컨트롤과 함께 전체 Chrome 플레이어를 살펴본 다음 BYOC Chromeless 플레이어를 살펴보겠습니다. 다음은 MXML에서 전체 Chrome 플레이어를 사용하는 방법입니다.
<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의 액션스크립트 3 버전을 사용하는 방법을 알아보겠습니다. 이 버전은 Flex 프레임워크의 클래스가 필요하지 않으며 Flash Player 네이티브 클래스만 사용합니다. 전체 Chrome 플레이어를 먼저 실행한 다음 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를 활용합니다. 이를 통해 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 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 매개변수는 Chrome에 없음을 알리는 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
마무리
이 도움말이 YouTube 애플리케이션의 기능과 Flash 애플리케이션을 통합하는 데 도움이 되었기를 바랍니다. TubeLoc으로 개발할 때는 유의해야 할 제한사항이 있습니다. 무대에 동시에 두 명의 YouTube 플레이어가 있을 수 없습니다.
조만간 문제가 해결되기를 바랍니다. 따라서 버그나 일부 기능이 누락된 경우 Google Code 프로젝트를 방문하여 Issue Tracker를 통해 신고해 주시기 바랍니다. 읽어주셔서 감사합니다
작성자 약력
벤 롱고리아는 위스콘신 대학교 매디슨 캠퍼스의 학술 애플리케이션 개발자입니다. 플래시 5 이후 Flash를 사용하고 Flex 2 출시 이후 Flex를 통해 개발 중입니다. 또한 지난 2년 동안 Mozilla 기반 애플리케이션을 개발해 왔습니다. 벤은 브라우저와 데스크톱을 모두 타겟팅하는 크로스 플랫폼 애플리케이션을 포함하여 여러 교육 및 학술 프로젝트를 진행했습니다. 인터페이스 및 상호작용 디자인에 능동적인 역할을 맡고 있으며 가용 소프트웨어를 만드는 데 어려움을 겪습니다. http://enefekt.com/sansbrowser/에서 블로그를 확인하고 InsideRIA에 참여하실 수 있습니다.
이 저작물은 크리에이티브 커먼즈 저작자 표시 3.0 미국 라이선스에 따라 라이선스가 부여됩니다.