FX

JavaFX software has a media API that enables you to fully control playback of video. This API is in the javafx.scene.media package. The media API is fairly low level, however. It doesn't provide a player with buttons, a slider, and the other features you expect from a typical video player. You could build your own more elaborate video player, but you have another option. You could use the JavaFX MediaBox Component, a prefabricated video player in the com.sun.javafx.mediabox package.

video from Big Buck Bunny

Understanding the Code

The JavaFX MediaBox Component is a visual component that provides the standard video player controls. It has a play/pause button, a slider to scrub through the video, a time indicator, and hidden mode, where the controls are hidden until you move the mouse. Soon it will have fullscreen mode as well. Using the JavaFX MediaBox Component couldn't be any simpler. Just create an instance of the component with a link to your video, set a few variables, then put it in a Stage, as shown in Figure 1.

import javafx.stage.Stage;
import javafx.scene.Scene;
import com.sun.javafx.mediabox.*;

var media = "http://sun.edgeboss.net/download/sun/media/1460825906/1460825906_11810873001_09c01923-00.flv";

var mediaBox = MediaBox {
    // your media(video/audio) source and information
    // Only mediaSource is the required variable. All others are optional.
    mediaSource: media
    mediaTitle: "Big Buck Bunny"
    mediaDescription: "A well-tempered rabbit finds his day..."

    // controls the visibility of mediaTitle/mediaDescription
    showMediaInfo: true

    // the position and size of the media on screen
    translateX: 0
    translateY: 0
    width: 640
    height: 360

    // make the movie play as soon as it's loaded
    autoPlay: true

    // media controlbar height at the bottom of the media view
    mediaControlBarHeight: 25

    // some examples of function variables to interact with outside
    onEndOfMedia: function() {
    }
    onMouseClicked: function(me) {
    }
}

Stage {
    title: "MediaBox Player"
    resizable: true
    scene: Scene {
        content: mediaBox
    }
}

Figure 1: Using the MediaBox Component

The most important variables in the previous code are the first few. You must set the mediaSource to actually play video. You can choose the size and position of the video with translateX, translateY, width and height. The autoPlay variable do exactly what you might expect: determine if the media should start playing as soon as it can.

You can set the height of the control bar by initializing mediaControlBarHeight with the desired pixel size. The default is 25 pixels.

Another set of variables specify the text displayed at the top of the video when the mouse is moved over the video. There are two strings, mediaDescription, and mediaTitle.

If you change mediaSource the component will attempt to play media from the new URL. Internally the component uses a trigger on this variable, and this will only be fired if the value of the variable is changed.

Finally, if you want to know when the media has finished playing, there is a function variable onEndOfMedia():Void you can assign your own function to.

Using MediaBox in Hello World Example

The JavaFX MediaBox sample can be used as a library. When it is built, MediaBox.jar will be generated. Simply add it to your FX project as a library. Copy and paste the following code to your main FX class.

package hellomediabox;

import javafx.stage.Stage;
import javafx.scene.Scene;
import com.sun.javafx.mediabox.*;

var media = "http://sun.edgeboss.net/download/sun/media/1460825906/1460825906_11810873001_09c01923-00.flv";

Stage {
    title: "MediaBox Player"
    resizable: true
    scene: Scene {
        content: MediaBox { media }
    }
}

Figure 2: Hello MediaBox Example