Tag - mediaView - Yet another blog about WPF, Surface, SL, MVVM, NUI....

Let's continue pur story about creating our own media player

What will we do in our second part ? :

Display the meta-information of our video.
Create animation and triggers to show it in a non-disturbing way.
Add some triggers to our video : play/pause on click.
Double-clic to resume the video
Enjoy ourselves!

Display the meta-informations in a non-disturbing way

We already have all the informations to display because we gived them to our component.
Now we will display them in an header:

First we create the gray rectangle which is behind the meta-information and the two differents text. We will add them to a group to ease the use of trigger to show/hide them.

/** ###########################################
    * The Top Rectangle of description
     *   ########################################### */
    var topRDescription : Rectangle = Rectangle{
        x:x
        y:y
        width:vidWith
        height: 40
        opacity:0.5
        fill:Color.DARKGRAY
}
 
    var titleText: Text =  Text{
        x:topRDescription.x + 10
        y: topRDescription.y + 25
        textOrigin: TextOrigin.BOTTOM
        content: bind vidTitle
        fill:Color.ORANGE
        font: Font.font("Verdana", FontWeight.EXTRA_BOLD, 18)
}
 
    var descriptionText: Text =  Text{
        x:topRDescription.x + 10
        y: topRDescription.y + 35
        content: bind vidDescription
        fill:Color.WHITE
        font: Font.font("Verdana", FontWeight.MEDIUM, 10)
}
 
    var groupVidMETA : Group = Group{
        content: [topRDescription,titleText,descriptionText]
        cursor: Cursor.DEFAULT
        opacity: 0.0
        visible: bind showInfoBar
}

Don't forget to add it in the returned Group of our component:

return Group{
            content: [mediaView,groupVidMETA]
        }

You can see that the visibility of our meta-information's bar is bind to a var showInfoBar. This is on this var that we will act to show/hide the bar. Sets this var to true and the informations will be displayed all the time... this is cool but quite boring when you want watch the movie which is behind. We will so add some animations to display it in a non disturbing way.

Create animation and triggers to show it in a non-disturbing way.

We will now display the bar only when the mouse is hover the video or when the video is paused.
To do this we will use the opacity of the bar and add animation in the MediaView's node triggers. Remember the MediaView is the node in which the media is displayed.
Resume of the things to do :

Add the onMouseEntered trigger to the MediaView,
Creates and play an animation in it which will set the groupVidMETA'opacity from it's current state to 1 in 500ms.
Add the onMouseExited trigger to the MediaView and add an animation to hide the meta's info only if the video is not paused.

The resulting mediaView var is then :

//The node displaying the video   
    var mediaView : MediaView = MediaView{
        x:x
        y:y
        mediaPlayer: bind mediaPlayer
        fitHeight:vidHeight
        fitWidth:vidWith
          //Show the informations in an animation.
        onMouseEntered: function(me: MouseEvent){
            Timeline {
                keyFrames: [
               at(0s) {
                    groupVidMETA.opacity =>    groupVidMETA.opacity tween Interpolator.LINEAR;
                    groupControlBar.opacity => groupControlBar.opacity  tween Interpolator.LINEAR;
                }
                  at(500ms) {
                    groupVidMETA.opacity => 1.0 tween Interpolator.LINEAR;
                    groupControlBar.opacity => 1.0 tween Interpolator.LINEAR;
            }
                ]
            }.play()
 
        }
        //Hide the informations in an animation if the video is not paused.
        onMouseExited: function(me: MouseEvent){
            if(mediaPlayer.status != MediaPlayer.PAUSED){
                Timeline {
                    keyFrames: [
               at(0s) {
                        groupVidMETA.opacity => groupVidMETA.opacity  tween Interpolator.LINEAR;
              }
                  at(500ms) {
                        groupVidMETA.opacity => 0.0 tween Interpolator.LINEAR;
            }
                    ]
                }.play();
 
            }
        }
};

We are abble to know if the video is paused by accessing the mediaPlayer's status and comparing it to it's PAUSED def.
Now that informations are displayed, we will add triggers to play or pause the video.

Add some triggers to our video : play/pause on click.

This is done by adding a onMouseClicked trigger to our mediaView Component. We will also check that it's the left button that is clicked to perform the play/pause and reserve the right button to maybe future functionnality.
Also we will set the cursor to the HAND def: tell our watcher that they can do something by clicking the video.
This is what we add to our mediaView component:

cursor:Cursor.HAND
 
        onMouseClicked: function(me: MouseEvent){
            //Only a left click play/pause the video
            if(me.button == MouseButton.PRIMARY ) {
 
                if(mediaPlayer.status == mediaPlayer.PAUSED){
                    mediaPlayer.play();
                }else {
                    mediaPlayer.pause();
                }
            }
        }

Enjoy ourselfs

You can find our component source in this post and view a demo on this page: demo of the videoPlayer - part 2.
It can be long to load... My server fault ...

I noticed in this post that the mediaComponent pointed out in the JavaFX demos was not still available and that we will so make our own...

Lets start !

What will we do in our first part ? :

Create our custom node MyMediaComponent
Add the video in our component
Enjoy ourselfs!

Create our custom node: MyMediaComponent

The first thing to do is quite easy : create a new JavaFX class in Nebeans and make it extends the CustomNode class from the javafx.scene package. This class is provided to enable you making your own nodes.

You will then have to ovveride the "create():Node" method :

public override function create():Node{
        return Group{
            content: []
        }
    }

We will add more things in the content when we will build them.
First we will add some var to our class, They will contains some informations about our component :

/** X attribute of our component. */
 public var x : Integer = 0 ;
 /** Y attribute of our component. */
 public var y : Integer = 0 ;
 
/** A description of the video. */
public var vidDescription : String = "" ;
/** The title of the video. */
public var vidTitle : String = "" ;
/** Start volume of the video. */
public var startVolume : Number = 0.5;
/** Do where display the meta informations on the video */
public var showInfoBar : Boolean = true;
/** The url of the video. */
public var mediaURL : String ="" ;
/** The Width in wich where will make the video fit. */
public var vidWith : Integer = 384;
/** The height in wich where will make the video fit. */
public var vidHeight : Integer = 288 ;

Add the video in our component

We will add the video in our component. To add this features we will use three differents Object in the JavaFX API:

Media : contains the basic informations about our media, Note that it can be a video or an audio media...
MediaPlayer: this object is used to perform the differents actions on our video; play/pause. This component also contains the informations about the status of the current video: playing/paused/buffering, etc ... We give it the media.
MediaView: this object is the node in which the video is displayed. We give it the mediaPlayer.

Lets add it in our class and use the differents var we created just before :

var media:Media = Media{
        source: mediaURL
    };
    var mediaPlayer: MediaPlayer = MediaPlayer{
        media:media
        autoPlay:true
    };
 
    var mediaView : MediaView = MediaView{
        x:x
        y:y
        mediaPlayer: bind mediaPlayer
        fitHeight:vidHeight
        fitWidth:vidWith
      };

The autoPlay attribute tells that the video is played as soon as it can be by the player (when enough data is available when buffered).

Now that we have created the different component we will add the mediaView in the group returned by our create() function:

public override function create():Node{
        return Group{
            content: [mediaView ]
        }
    }

Now by adding our component in your application you will display the video and play it. This is a first step in the birth of our videoComponent:

In the next part you will learn how to display the informations on the video currently played when hovering the video and how to add some triggers (play/pause the video by clicking on it).

+++

Yet another blog about WPF, Surface, SL, MVVM, NUI....

2011

2010

2009

2008

Tag - mediaView

Create your VideoPlayer with JavaFX, part two.