야훔의 Front-END

컴파일도 잘 되는거 같으니 이제 코드를 좀 적어줘야겠다. OSMF에서 가장 중요한 녀석은 MediaPlayer라는 클래스다. 이녀석이 재생 컨트롤도 맡고 있고 시간도 뱉어낸다. 온갖 이벤트를 발생시켜서 플레이어의 상태도 알려준다. API를 살펴보자.
어도비가 다른건 몰라도 Language Reference를 기똥차게 만든다고 생각한다. 어쩜 이렇게 잘 만드는지. MediaPlayer를 찾아들어가서 보니 Example이 떡하니 있다.

요 예제를 그대로 Main 클래스에 옮겨서 컴파일 해보도록 하자. 아, 물론 package 경로랑 constructor 이름은 Main 클래스에 맞게 고쳐야겠지.
그래서 전에 만든 명령어를 이용해 컴파일을 한 다음 swf를 실행해 보자.

예제를 만들고 나서 알았다. 파일의 확장자가 mp3 였다는 사실을!! 이런!! 그러고 보니 AudioElement라는 클래스를 사용한걸 보니 영상쪽이 아니라 mp3 재생기였다.
생각해보니 OSMF Feature를 보면 재생할 수 있는 포멧들이 쭉 나와있는데 mov, mp4, flv, swf, mp3... 등등이라고 나와있다.

잘 읽어보니 OSMF에서 재생되는 포멧이 아니라 Flash Player 10.0 이후 버젼에선 저런 포멧들을 지원한다는 이야기인거다. 어쨌든 지금 뭘 재생할 수 있느냐가 중요한게 아니라 영상을 재생하고 싶은거니깐 일단 영상부터 나오게 해보자.

예제 코드를 아래와 같이 살짝 수정해 보자.

package { import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import org.osmf.containers.MediaContainer; import org.osmf.elements.VideoElement; import org.osmf.events.TimeEvent; import org.osmf.media.MediaPlayer; import org.osmf.media.URLResource; import org.osmf.media.MediaPlayerSprite; public class Main extends Sprite {     private var mediaPlayer:MediaPlayer;     public function Main()     {          super();         stage.scaleMode = StageScaleMode.NO_SCALE;         stage.align = StageAlign.TOP_LEFT;         var mediaPlayerSprite:MediaPlayerSprite = new MediaPlayerSprite();         var videoElement:VideoElement = new VideoElement();         videoElement.resource = new URLResource("rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/   test/SpaceAloneHD_sounas_640_500_short");         mediaPlayer = mediaPlayerSprite.mediaPlayer;         addChild( mediaPlayerSprite );         mediaPlayer.volume = .5;         mediaPlayer.loop = true;         mediaPlayer.addEventListener(TimeEvent.CURRENT_TIME_CHANGE, onTimeUpdated);          mediaPlayer.addEventListener(TimeEvent.DURATION_CHANGE, onTimeUpdated);         mediaPlayer.autoPlay = true;         mediaPlayer.media = videoElement;      }     private function onTimeUpdated(event:TimeEvent):void     {         trace('time: ' + mediaPlayer.currentTime + ' duration: ' + mediaPlayer.duration);     } } }

이렇게 수정하고 컴파일을 하면 아래와 같은 에러메시지를 확인 할 수 있는데

사실 이 내용은 "RSL 컴파일 안되니까 옵션에서 빼라"는 말입니다. 저 메시지를 보게되면 명령어를 다음과 같이 바꿔서 컴파일 해주면 된다. RSL 컴파일에 대해서는 여러 블로그에서 설명을 하고 있으므로 한번 검색해서 스스로 공부해 보길 바란다.

위에 빨간줄 쳐진 부분을 컴파일 옵션에 포함시키면 위와 같은 현상은 없어지지만 swf 파일의 용량이 129kb로 뻥튀기 된다. 그 이유는 RSL 컴파일에 대해서 공부하면 자연스럽게 나오므로 따로 설명하진 않겠다.

컴파일도 되었겠다. 한번 swf를 실행해보자.

오오오 동영상이 재생된다. 어디나라 언어인진 못알아 보겠지만; 파일명에 확장자가 없는데도 잘 재생되는 걸 보니 꽤나 똑똑하게 만들어졌나 보다.( flash.media.Video 객체가 꽤나 똑똑한 모양 )
다음 3탄에서는 간단한 컨트롤러를 이용해서 동영상을 컨트롤 하는 것을 만들어볼 예정이지만 언제 만들어질지는 알기 힘들다. 왜냐하면 꽤나 큰 프로젝트를 맡아서 진행하게 되어 시간이 부족해졌기 때문인데... 언제든 짬짬히 다음 3탄을 만들어 올리도록 하겠다. 에헴.

일단 OSMF로 플레이어를 만드려면 준비물이 필요하다. 최근에 나온 1.6 Sprint 5를 기준으로 샘플을 만들어볼텐데 그걸 어디서 구하냐... 하면 http://opensource.adobe.com/wiki/display/osmf/Downloads 여기서 구하면 된다.

이번에도 저렴하게 Edit Plus로 코딩할텐데 swc 라이브러리 파일을 complie 옵션에 포함시킬지 명령어를 만들어보자.

일단 http://livedocs.adobe.com/flex/3/html/compilers_06.html#149503 여기에 가보면 Command-line에서 사용되는 문법들을 정리해 뒀다. Builder에서 컴파일을 못할경우. 음. 그러니까. 예를 들어 리눅스 환경에서 개발할 경우라던가 하는 경우에 용이하게 사용되거나 나처럼 Builder의 정품 인증 30일을 넘어서 코딩하기 힘들때 용이하게 사용할 수 있겠다.

라이브러리 경로를 추가할 수 있게 되었다. 그렇다면 나는 libs라는 디렉토리를 만들고 거기에 OSMF.swc를 넣어준담에 컴파일을 해보면.. 아래와 같은 현상을 관찰 할 수 있다.

Main.as

package { //----------------------------------------------------------------------------- // //  Imports // //----------------------------------------------------------------------------- import flash.display.Sprite; /**  *  Main Class  */ public class Main extends Sprite {     //-----------------------------------------------------------------------------     // Constructor     //-----------------------------------------------------------------------------     /**      *  Constructor.      */     public function Main()     {         super();     }     //-----------------------------------------------------------------------------     // Variables     //-----------------------------------------------------------------------------     //-----------------------------------------------------------------------------     // Properties     //-----------------------------------------------------------------------------     //-----------------------------------------------------------------------------     // Methods     //-----------------------------------------------------------------------------     //-----------------------------------------------------------------------------     // Events     //----------------------------------------------------------------------------- } }

이렇게 코드를 짜놓고..

libs 폴더를 만들고

OSMF.swc를 복사해 붙여넣고

컴파일 명령어에 -library-path+=libs 명령어를 추가해주면

Flash라는 것을 조금 하다 보면 이런 요구사항들을 들어볼 수 있는데 "동영상 플레이어 만들어주삼" 인거심.
동영상 플레이어를 만드는 방법은 생각보다 많은 이벤트를 이해해야하고
NetStream 머시깽이랑 Video 클래스랑 NetConnection이랑 이것저것 많이 쉐킷쉐킷 섞어서 만들어야 하기 때문에 다들 꺼려하는 장르중에 하나다. 그도 그럴게 일단 Flash에서 동영상 플레이어란 미디어 서버에 붙어서 스트리밍 방식의 동영상 재생이 기본기능으로 자리잡고 있으므로 NetConnection으로 일단 커넥션을 열어두고 그 정보를 NetStream 클래스에 넘겨준다음에 NetStream에서 데이터를 스트리밍으로 받아서 Video에 넘겨주면 그 데이터를 재생시켜주는 순서를 갖게 된다. 뭔가 복잡한가??!!!

그래서 어도비에서 Open Framework 로 OSMF(Open Source Media Framework)라는 것을 만들어 냈다.

이게 뭐냐 하면 Flash로 할 수 있는 거의 모든 미디어 기능을 요녀석이 아주아주 간편하게 만들어주는 것. 이라고 생각하면 된다. 그와 동시에 해결해주는 것들이

1. HTTP Dynamic Streaming
2. RTMP Dynamic Streaming
3. Stage Video
4. Streaming Video Play
등등등..

미디어 서버로 동영상 재생하는건 다된다. 심지어 Live 방송도 재생한다.
그냥 알아서 다 해결해준다. 멋지지 않은가.
하지만 코드양은 좀 많다. 물론 예전보다야 많이 줄었다.
그래서 동영상 플레이어를 사용하는데 큰 어려움이 없어졌다.
그럼 이제 한번 만들어볼까? 다음 이시간에 계속.