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 Media Component, a prefabricated video player in the com.sun.fxmediacomponent package.

video from Big Buck Bunny

Understanding the Code

The JavaFX Media 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 Media 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.

package simplevideoplayer;

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

// Please replace these URLs with a suitable URL where your media is stored
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

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

The second group of variables configures the control bar and its behavior. The staticControlBar fixes the control bar below the video. If you set this variable to false, the control bar will be on top of the video, and fade in and fade out with the mouse.

If you set showMedia to false, only the control bar will be shown, with the width of the control bar given by mediaViewWidth. You can set the height of the control bar by initializing controlBarHeight with the desired pixel size. The default is 25 pixels. If the media is not video you can specify the URL of an image to display in the video area with mediaImage.

Another set of variables specify the text displayed at the top of the video when the mouse is moved over the video. There are three strings, mediaDescriptionStr, mediaDurationStr and mediaTitleStr are displayed in a color defined by textColor.

If you change mediaSourceURL 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. If you want to change the media source without knowing whether the URL will have changed, you can call the function setMediaSource(newSource:String).

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.