Tải bản đầy đủ - 0 (trang)
3-4. Marking a Position in a Video

3-4. Marking a Position in a Video

Tải bản đầy đủ - 0trang



Begin by applying recipe 3-3. By obtaining the marked durations (in milliseconds) from the previous

recipe you will create media marker events at points into the video. With each media marker you will

associate text that will be displayed as closed captions. When a marker comes to pass, a text will be

shown to the upper-right side.

The following code snippet demonstrates media marker events being handled in the onDragDropped

event property of the Scene object:

... // inside the start() method

final VBox messageArea = createClosedCaptionArea(scene);


// Dropping over surface

scene.setOnDragDropped(new EventHandler() {


public void handle(DragEvent event) {

Dragboard db = event.getDragboard();

... // drag dropped code goes here

// load media

Media media = new Media(resourceUrlOrFile.toString());

... // clean up media player

// create a new media player

mediaPlayer = MediaPlayerBuilder.create()



...// Set media ‘onXXX’ event properties


media.getMarkers().put("Starting race", Duration.millis(1959.183673));

media.getMarkers().put("He is begining \nto get ahead", Duration.millis(3395.918367));

media.getMarkers().put("They are turning \nthe corner", Duration.millis(6060.408163));

media.getMarkers().put("The crowds cheer", Duration.millis(9064.489795));

media.getMarkers().put("He makes the \nfinish line", Duration.millis(11546.122448));

// display closed captions

mediaPlayer.setOnMarker(new EventHandler (){

public void handle(MediaMarkerEvent event){









}); // end of setOnDragDropped()

Shown following is a factory method that returns an area that will contain the closed caption to be

displayed to the right of the video:

private VBox createClosedCaptionArea(final Scene scene) {

// create message area

final VBox messageArea = new VBox(3);


messageArea.translateXProperty().bind(scene.widthProperty().subtract(152) );


closedCaption = TextBuilder.create()



.font(new Font(15))



return messageArea;


Figure 3-5 depicts the video media player displaying closed caption text.

Figure 3-5. Closed caption text

How It Works

The Media API has many event properties that the developer can attach EventHanders or Runnables

instances so they can respond when the events are triggered. Here you focus on the OnMarker event

property. The Marker property is responsible for receiving marker events (MediaMarkerEvent).

Let’s begin by adding markers into our Media object. It contains a method getMarkers() that returns

an javafx.collections.ObservableMap. With an observable map, you can add key

value pairs that represent each marker. Adding keys should be a unique identifier, and the value is an

instance of Duration. For simplicity I used the closed caption text as the key for each media marker. The

marker durations are those written down as you press the pause button at points in the video from



recipe 3-3. Please be advised that I don’t recommend doing this in production code. You may want to

use a parallel Map.

After adding markers you will be setting an EventHandler into the MediaPlayer object’s OnMarker

property using the setOnMarker() method. Next, you will create the EventHandler instance to handle

MediaMarkerEvents that are raised. Once an event has been received, obtain the key representing the text

to be used in the closed caption. The instance variable closedCaption (javafx.scene.text.Text node)

will simply be shown by calling the setText() method with the key or string associated to a marker.

That’s it for media markers. That goes to show you how you can coordinate special effects,

animations, and so on during a video quite easily.

3-5. Synchronizing Animation and Media


You want to incorporate animated effects in your media display. For example, you want to scroll “The

End” after a video is finished playing.


Use recipe 3-3 together with recipe 2-2. Receipe 3-3 shows how to respond to media events. Recipe 2-2

demonstrates how to use javafx.animation.TranslateTransition to animate text.

The following code demonstrates an attached action when an end of a media event is triggered:

mediaPlayer.setOnEndOfMedia(new Runnable() {


public void run() {






Shown here is a method that creates a translateTransition of a Text node containing the string

“The End” that animates after an end of media event is triggered:

public TranslateTransition createTheEnd(Scene scene) {

Text theEnd = TextBuilder.create()

.text("The End")

.font(new Font(40))






TranslateTransition scrollUp = TranslateTransitionBuilder.create()






.fromY(scene.getHeight() + 40)



return scrollUp;


Figure 3-6 depicts the text node “The End” scrolling up after the OnEndOfMedia event is triggered.

Figure 3-6. Animate The End

How It Works

In this recipe you will be able to synchronize events to animated effects. In other words, when the video

reaches the end, an OnEndOfMedia property event will initiate a Runnable instance. Once initiated, a

TranslateTransition animation is performed by scrolling a Text node upward with the string “The End”.

So, let me describe the setOnEndOfMedia() method associated with the MediaPlayer object. Just like

recipe 3-3, we simply call the setOnEndOfMedia() method by passing in a Runnable that contains our code

that will invoke an animation. If you don’t know how animation works, please refer to recipe 2-2. Once

the event occurs, you will see the text scroll upward. The following code snippet is from inside the

scene.setOnDragDropped() method:

mediaPlayer.setOnEndOfMedia(new Runnable() {


public void run() {






For the sake of space, I trust you know where the code block would reside. If not, you may refer to

recipe 3-3, in which you will notice other OnXXX properties methods. To see the entire code listing, visit

the book’s web site to download the source code.


Tài liệu bạn tìm kiếm đã sẵn sàng tải về

3-4. Marking a Position in a Video

Tải bản đầy đủ ngay(0 tr)