FX

JavaFX 소프트웨어는 여러분이 비디오 비디오 재생을 완전하게 제어할수 있게 해주는 미디어 API를 가지고 있습니다. 이 API는 javafx.scene.media package에 있습니다. 하지만 미디어 API는 상당히 저수준 입니다. 그것은 버튼들, 슬라이더, 그리고 여러분이 전형적인 비디오 플레이어에서 기대하는 다른 것들을 가지고 있는 플레이어를 제공하지 않습니다. 여러분은 여러분 자신만의 좀더 공들인 비디오 플레이어를 만들수 있습니다만 여러분은 또 다른 옵션을 가지고 있습니다. 여러분은 com.sun.fxmediacomponent 패키지에 미리 만들어진 비디오플레이어인 JavaFX Media 컴포넌트를 사용할수 있습니다.

Run Example with Java Webstart

video from Big Buck Bunny

코드 이해하기

JavaFX Media 컴포넌트는 표준 비디오 플레이어 제어를 제공하는 비주얼 컴포넌트 입니다. 그것은 재생/일시정지 버튼, 비디오 scrub(재생라인을 드래그 해서 움직이는)를 위한 슬라이더, 타임 인디케이터, 그리고 여러분이 마우스를 움직일때까지 컨트롤들이 숨겨져 있는 히든 모드를 가지고 있습니다. 게다가 그것은 곧 전체화면 모드를 가지게 될것입니다. JavaFX Media 컴포넌트를 이용하면 더이상 간단해 질수 없습니다. 단지 여러분의 비디오에 링크를 가지고 있는 컴포넌트의 인스턴스를 만들고 몇개의 변수들을 맟추고 그리고 나서 그것을 Figure 1에서 보여지는것처럼 Stage에 배치하기만 하면 됩니다.

package simplevideoplayer;

import javafx.stage.Stage;
import javafx.scene.Scene;
import com.sun.fxmediacomponent.*;
import javafx.scene.Group;

def mediaUrl:String ="http://capra.sfbay.sun.com/~jm158417/javafx_videos/big_buck_bunny_512x288_h264.flv";

var vidWidth = 512;
var vidHeight = 288;
var fullWidth = 640;
var fullHeight = 360;

var mediaBox:MediaComponent = MediaComponent {
    
    // set the media and make the component visible
    mediaSourceURL : mediaUrl
    visible:true

    // the position and size of the media on screen
    translateX: 0
    translateY: 0
    mediaViewWidth : fullWidth
    mediaViewHeight: fullHeight

    // determines if the control bar is below the media or on top with a fade in
    staticControlBar: false
    
    // make the movie play as soon as it's loaded
    mediaPlayerAutoPlay: true

    // set the volume
    volume: 0.5
};

// Currently these have to be set after the component is created

// Description to be displayed when the mouse is over the component
mediaBox.mediaDescriptionStr = "A well-tempered rabbit finds his day spoiled by the rude actions of the...";
// Duration to be displayed when the mouse is over the component
mediaBox.mediaDurationStr = "9:56";
// Title to be displayed when the mouse is over the component
mediaBox.mediaTitleStr = "Big Buck Bunny";

Stage {
   title: "Simple Media Player"
   scene: Scene{
       width: fullWidth
       height: fullHeight
       content: mediaBox
       stylesheets: [
          MediaComponent.css_skins
      ]
   }
}

Figure 1: Using the MediaComponent

앞의 코드에서 가장 중요한 변수들은 처음에 있는 몇개 입니다. 여러분은 실제 상영하는 비디오에 var class="code-attribute">mediaSourceURL를 배치해야만 합니다. 여러분은 translateX, translateY, mediaViewWidth 그리고 mediaViewHeight로 비디오의 위치와 크기를 선택할수 있습니다. volume와 mediaPlayerAutoPlay 변수는 여러분이 기대했을지도 모를것에 대해서 정확하게 처리합니다: 기본 볼륨을 제어하고 만약 미디어가 가능한 빨리 플레이를 시작해야만 하는지를 결정합니다.

변수들의 두번째 그룹은 컨트롤 바와 그 움직임을 설정합니다. staticControlBar는 비디오 아래에 컨트롤 바를 고정합니다. 만약 여러분이 이 변수를 false로 상태로 한다면 컨트롤바는 비디오의 최상단에 위치하고 마우스를 사용하여 페이드-인 하고 페이드-아웃 합니다. 만약 여러분이 마우스 이벤트를 피하고 싶다면 being propogated to 하면 됩니다

만약 여러분이 showMedia를 false 상태로 한다면 mediaViewWidth에 의해서 주어진 컨트롤바의 너비를 가진 컨트롤 바만 보여질 것입니다. 여러분은 원하는 픽셀 크기로 controlBarHeight를 초기화 함으로써 컨트롤바의 높이를 조절할수 있습니다. 기본값은 25 픽셀입니다. 만약 미디어가 비디오가 아니라면 여러분은 mediaImage로 비디오 영역에 표시될 이미지의 URL을 지정할수 있습니다.

변수들의 또다른 집합은 마우스가 비디오 위로 겹쳐딜때 비디오의 최상단에 표시되는 text를 지정합니다. mediaDescriptionStr, mediaDurationStr 그리고 mediaTitleStr 이 세문자열은 textColor에서 정의된 색깔로 표시되어집니다.

만약 여러분이 mediaSourceURL를 변경한다면 컴포넌트는 새로운 URL로 부터 미디어 플레이를 시도할 것입니다. 만약 URL이 URL이 바뀔것인지 아닌지 인지 없이 미디어 소스를 바꾸길 원한다면 여러분은 setMediaSource(newSource:String) 함수를 호출할수 있습니다.

마지막으로 만약 여러분이 미디어가 상영을 마칠때를 알고 싶다면 여러분이 여러분 자신의 함수에 할당할수 있는 onEndOfMedia():Void 함수 변수가 있습니다.