07. JavaFX 컨트롤

fitWidth와 fitHeight는 MediaView의 폭과 높이를 지정한다. preserveRatio는 비디오의 종횡

비를 유지할 것인지를 지정하는데, false는 비디오의 종횡비와 상관없이 fitWidth와 fitHeight에

맞게 MediaView의 크기가 고정되고, true는 비디오의 종횡비에 맞게 MediaView 크기가 조정

된다.

MediaView 컨트롤은 비디오를 재생하는 기능이 없기 때문에 미디어를 재생하는 MediaPlayer

가 필요하다. MediaPlayer는 비디오뿐만 아니라 오디오도 재생할 수 있는데, 미디어 파일 경로를

Media 객체 형태로 전달해서 다음과 같이 생성한다.

Media media = new Media(“미디어 소스 경로”); MediaPlayer mediaPlayer = new MediaPlayer(media);

예를 들어 클래스 경로에 있는 비디오 파일을 재생하는 MediaPlayer는 다음과 같이 생성할 수 있다.

Media media = new Media(getClass().getResource(“media/bigbuck.m4v”).toString()); MediaPlayer mediaPlayer = new MediaPlayer(media);

미디어 소스가 비디오라면 MediaView의 setMediaPlayer ( ) 메소드로 MediaPlayer 객체를 등

록할 수 있다. 오디오 소스로부터 MediaPlayer가 생성되었다면 MediaView는 필요 없다.

mediaView.setMediaPlayer(mediaPlayer);

MediaPlayer를 생성했다고 해서 바로 재생할 수는 없고, 재생할 상태(READY )가 될 때까지 기다

려야 한다. 다음 표는 MediaPlayer가 가질 수 있는 상태와 상태를 변경하는 메소드가 무엇인지 보

여준다.

다음 상태

현재 상태

UNKNOWN

READY

PAUSED

PLAYING

STALLED

STOPPED

READY

PAUSED

PLAYING

STALLED

STOPPED

setAutoplay(true) play( )

play( )

stop( )

pause( )

buffering data

stop( )

pause( )

data buffered

stop( )

pause( )

play( )

UNKNOWN은 Mediaplayer가 생성된 직후의

UNKNOWN

상태인데, 미디어를 재생할 준비가 되면 READY

상태로 자동 변경된다.

READY 상태에서 setAutoPlay (true ) 또는 play ( )

를 호출하면 PLAYING이 된다. PLAYING 상태

에서 pause ( )를 호출하면 PAUSED 상태가 되고,

stop ( )을 호출하면 STOPPED 상태가 된다.

READY

PLAYING

STALLED

PAUSED

STOPPED

만약 PLAYING 상태에서 재생 버퍼에 충분한 데이터가 없을 경우 STALLED 상태가 된다. 주로 네

트워크상에서 미디어 소스를 받아 재생할 때 네트워크 속도가 느리면 STALLED 상태가 된다.

위 표의 상태들은 MediaPlayer.Status 열거 타입으로 모두 정의되어 있는데, 코드에서

MediaPlayer의 상태를 알고 싶다면 getStatus ( )의 리턴값을 확인하면 된다.

위 표에는 나와 있지 않지만 EndOfMedia 상태도 있다. EndOfMedia는 MediaPlayer가 미

디어를 모두 재생했을 때의 상태를 말한다. EndOfMedia 상태에서 play ( )를 호출하면 다시

PLAYING 상태가 되는데, 처음 위치에서 자동 재생되지 않기 때문에 seek ( ) 메소드로 재생 위치

를 처음으로 되돌려놓고 play ( )를 호출해야 한다.

상태가 변경되면 자동 실행해야 할 코드들이 있을 수 있다. 이런 코드들은 Runnable의 run ( ) 메소

드에 작성하고, setOnXXX ( ) 메소드로 등록하면 된다. 그러면 해당 상태가 되었을 때 Runnable

의 run ( ) 메소드가 자동 실행된다. 다음은 각 상태로 변경될 때 실행하는 Runnable을 설정하는

메소드이다.

상태

자동 실행 Runnable 설정 메소드

Runnable에 포함될 수 있는 코드

READY

setOnReady(Runnable r)

• 재생 시간을 표시하는 리스너 등록

• 재생 버튼 활성화

PLAYING

PAUSED

setOnPlaying(Runnable r)

• 멈춤 및 정지 버튼 활성화

setOnPaused(Runnable r)

• 재생 및 정지 버튼 활성화

STOPPED

setOnStopped(Runnable r)

• 재생 버튼 활성화

EndOfMedia

setOnEndOfMedia(Runnable r)

• 재생 버튼 활성화

다음은 setOnReady ( ) 메소드를 작성하는 방법을 보여준다.

mediaPlayer.setOnReady(new Runnable() {

@Override
public void run() {
//(cid:733)재생 버튼을 (cid:3357)성화 코드 또는 setAutoPlay(true);

//(cid:734)재생 시간을 알 수 있도록 currentTime 속성 (cid:1093)시 mediaPlayer.currentTimeProperty().addListener(new ChangeListener()

{

@Override
public void changed(ObservableValue<? extends Duration> observable,

Duration oldValue, Duration newValue) { … }

});

}

});

보통 READY 상태로 변경될 경우에는 PLAYING 상태로 변경할 수 있도록 [재생 버튼]을 활성

화하거나 자동 실행을 위해 setAutoPlay (true )를 호출한다. 그리고 재생 시간을 표시하기 위해

currentTime 속성을 감시하는 ChangeListener를 등록할 수 있다.

다음 예제는 비디오 파일과 오디오 파일을 재생하는 방법을 보여준다. RootController의 26라인과

27라인 중 하나를 주석처리하고 실행시켜 보자.

root.fxml

<?xml version ="1.0" encoding ="UTF-8"?>

<?import javafx.scene.layout.*?>
<?import javafx.scene.media.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.control.*?>

<AnchorPane xmlns:fx ="http://javafx.com/fxml"
fx:controller ="sec07.exam04_mediaview.RootController"
prefHeight ="220.0" prefWidth ="530.0" >
<children>
<StackPane layoutX ="10.0" layoutY ="10.0">
<children>
<ImageView fx:id ="imageView"

MediaView

ImageView





fitHeight ="200.0" fitWidth ="360.0"  preserveRatio ="false">
<image><Image url ="@media/audio.png" /></image>
</ImageView>
<MediaView fx:id ="mediaView"
fitHeight ="200.0" fitWidth ="360.0" preserveRatio ="false" />
</children>
</StackPane>
<Button fx:id ="btnPlay" layoutX ="385.0" layoutY ="15.0"
prefHeight ="23.0" prefWidth ="131.0" text ="재생" />
<Button fx:id ="btnPause" layoutX ="385.0" layoutY ="39.0"
prefHeight ="23.0" prefWidth ="131.0" text ="(cid:1893)(cid:2938)"/>
<Button fx:id ="btnStop" layoutX ="385.0" layoutY ="63.0"
prefHeight ="23.0" prefWidth ="131.0" text ="중지"/>
</children>
</AnchorPane>

>>> RootController.java


package sec07.exam04_mediaview;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.image.ImageView;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;







public class RootController implements Initializable {
@FXML private MediaView mediaView;
@FXML private ImageView imageView;
@FXML private Button btnPlay;
@FXML private Button btnPause;
@FXML private Button btnStop;

//재생 (cid:2542)료를 확인하는 (cid:3282)래그 필드 private boolean endOfMedia;

@Override
public void initialize(URL location, ResourceBundle resources) {
//미디어 객체 생성
//Media media  =  new Media(getClass().getResource("media/video.m4v").
toString());
Media media  =  new Media(getClass().getResource("media/audio.wav").
toString());

//미디어 (cid:3282)레이어 생성 및 미디어 (cid:2093)에 설정 MediaPlayer mediaPlayer = new MediaPlayer(media); mediaView.setMediaPlayer(mediaPlayer);

//READY 상태가 될 때 실행할 Runnable 설정 mediaPlayer.setOnReady(new Runnable() {

@Override
public void run() {
btnPlay.setDisable(false); btnPause.setDisable(true);
btnStop.setDisable(true);
if(mediaPlayer.isAutoPlay()) {mediaView.setVisible(false);}

}

});

//PLAYING 상태가 될 때 실행할 Runnable 설정 mediaPlayer.setOnPlaying(()->{ btnPlay.setDisable(true); btnPause.setDisable(false); btnStop.setDisable(false);

});

//PAUSED 상태가 될 때 실행할 Runnable 설정

mediaPlayer.setOnPaused(()->{ btnPlay.setDisable(false); btnPause.setDisable(true); btnStop.setDisable(false);

});

//EndOfMedia 상태가 될 때 실행할 Runnable 설정 mediaPlayer.setOnEndOfMedia(()->{ endOfMedia = true; btnPlay.setDisable(false); btnPause.setDisable(true); btnStop.setDisable(true);

});

//STOPPED 상태가 될 때 실행할 Runnable 설정 mediaPlayer.setOnStopped(()->{ mediaPlayer.seek(mediaPlayer.getStartTime()); btnPlay.setDisable(false); btnPause.setDisable(true); btnStop.setDisable(true);

});

//버튼 ActionEvent 처리 btnPlay.setOnAction(event->{ if(endOfMedia) { mediaPlayer.stop(); mediaPlayer.seek(mediaPlayer.getStartTime()); //재생 시간을 처음으로 돌림

//재생 중지

} mediaPlayer.play(); endOfMedia = false;

//재생하기

}); btnPause.setOnAction(event->mediaPlayer.pause()); btnStop.setOnAction(event->mediaPlayer.stop());

//일시 정지

//중지

}

}

AppMain.java

package sec07.exam04_mediaview;

import javafx.application.Application;










import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
Parent root  =  (Parent)FXMLLoader.load(getClass().getResource("root.
fxml"));
Scene scene  =  new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();

}

public static void main(String[] args) {
launch(args);

}

}

2) Slider 컨트롤

Slider 컨트롤은 Track과 Thumb로 구성되어 있다.

Track

Thumb

Block increment

Slider의 value 속성에는 현재 Thumb의 위치값이 저

장되는데, 최소값은 0, 최대값은 100이다.

0.0

50.0

기본적으로 Tick marks와 Tick label이 숨겨져 있는

Tick marks

Tick label

데, setShowTickMarks (true )와 setShowTickLabels (true )를 호출하면 볼 수 있다. Block

increment 간격은 setBlockIncrement ( )로 설정할 수 있다. 다음은 FXML로 Slider 컨트롤을

선언하는 방법을 보여준다.

@Override
public void changed(ObservableValue<? extends Number> observable,

Number oldValue, Number newValue) {
mediaPlayer.setVolume(sliderVolume.getValue() / 100.0);

}

});

<?xml version ="1.0" encoding ="UTF-8"?>

<?import javafx.scene.layout.*?>
<?import javafx.scene.media.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.control.*?>

<AnchorPane xmlns:fx ="http://javafx.com/fxml"
fx:controller ="sec07.exam05_slider_progressbar.RootController"
prefHeight ="220.0" prefWidth ="530.0" >
<children>
<StackPane layoutX ="10.0" layoutY ="10.0">






<children>
<ImageView fx:id ="imageView"
fitHeight ="200.0" fitWidth ="360.0"  preserveRatio ="false">
<image><Image url ="@media/audio.png" /></image>
</ImageView>
<MediaView fx:id ="mediaView"
fitHeight ="200.0" fitWidth ="360.0" preserveRatio ="false" />
</children>
</StackPane>
<Button fx:id ="btnPlay" layoutX ="385.0" layoutY ="15.0"
prefHeight ="23.0" prefWidth ="131.0" text ="재생" />
<Button fx:id ="btnPause" layoutX ="385.0" layoutY ="39.0"
prefHeight ="23.0" prefWidth ="131.0" text ="(cid:1893)(cid:2938)"/>
<Button fx:id ="btnStop" layoutX ="385.0" layoutY ="63.0"
prefHeight ="23.0" prefWidth ="131.0" text ="중지"/>

package sec07.exam05_slider_progressbar;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.ProgressIndicator;
import javafx.scene.control.Slider;
import javafx.scene.image.ImageView;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;
import javafx.util.Duration;

public class RootController implements Initializable {
@FXML private MediaView mediaView;
@FXML private ImageView imageView;
@FXML private Button btnPlay;
@FXML private Button btnPause;
@FXML private Button btnStop;

@FXML private Label labelTime;
@FXML private Slider sliderVolume;
@FXML private ProgressBar progressBar;
@FXML private ProgressIndicator progressIndicator;

private boolean endOfMedia;

@Override
public void initialize(URL location, ResourceBundle resources) {
//미디어 객체 생성
Media media  =  new Media(getClass().getResource("media/video.mp4").
toString());













//Media media  =  new Media(getClass().getResource("media/audio.wav").
toString());

@Override
public void run() {
mediaPlayer.currentTimeProperty().addListener(new
ChangeListener<Duration>() {
@Override
public void changed(ObservableValue<? extends Duration>
observable,
Duration oldValue, Duration newValue) {
double progress  =  mediaPlayer.getCurrentTime().toSeconds() /
mediaPlayer.getTotalDuration().toSeconds();
progressBar.setProgress(progress);
progressIndicator.setProgress(progress);
labelTime.setText(
(int)mediaPlayer.getCurrentTime().toSeconds()+"/"+
(int)mediaPlayer.getTotalDuration().toSeconds()+" sec");

}

});

btnPlay.setDisable(false); btnPause.setDisable(true);
btnStop.setDisable(true);
if(mediaPlayer.isAutoPlay()) {mediaView.setVisible(false);}

}

});

mediaPlayer.setOnPlaying(()->{
btnPlay.setDisable(true); btnPause.setDisable(false);
btnStop.setDisable(false);

});
mediaPlayer.setOnPaused(()->{
btnPlay.setDisable(false); btnPause.setDisable(true);
btnStop.setDisable(false);














});
mediaPlayer.setOnEndOfMedia(()->{
progressBar.setProgress(1.0);
progressIndicator.setProgress(1.0);
endOfMedia  =  true;
btnPlay.setDisable(false); btnPause.setDisable(true);
btnStop.setDisable(true);

@Override
public void changed(ObservableValue<? extends Number> observable,
Number oldValue, Number newValue) {
mediaPlayer.setVolume(sliderVolume.getValue() / 100.0);

package sec07.exam05_slider_progressbar;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
Parent root  =  (Parent)FXMLLoader.load(getClass().getResource("root.
fxml"));
Scene scene  =  new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();

}

public static void main(String[] args) {
launch(args);

}

}