Mis à jour le 05/10/2017
  • 4 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Les médias

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

L'un des principaux attraits de JavaFX, c'est qu'il permet de lire les vidéos en streaming. On va voir dans ce chapitre qu'il est très simple d'intégrer des lecteurs vidéo dans ses applications JavaFX, et on peut également lire des fichiers audio comme vous vous en doutez :p . La méthode est exactement la même pour lire un fichier audio que pour un fichier vidéo (ou presque). Nous n'apprendrons donc dans ce chapitre qu'à créer un lecteur vidéo.

Comme je vous l'ai dit à la fin du chapitre précédent, vous connaissez maintenant tous les outils proposés par le langage JavaFX, nous ne verrons aucun nouveau concept dans cette partie. Nous ne ferons qu'utiliser ceux que nous connaissons pour le cas particulier de la vidéo :) .

Les médias supportés

JavaFX permet donc de lire un certain nombre de formats audio et vidéo :

  • formats audio supportés : MP3, AIFF et WAV

  • format vidéo supporté : FLV contenant le codec vidéo VP6 et le codec audio MP3

Comme vous le savez sûrement, le format vidéo FLV est un format qui permet de lire la vidéo en streaming, c'est à dire que la vidéo peut être lue en même temps qu'elle est téléchargée. Vous pourrez donc à la fin de ce chapitre créer votre propre site de vidéo en ligne et concurrencer Youtube et Dailymotion ;) .

Le codec vidéo VP6 est un codec propriétaire développé par On2 Technologie, et qui dit propriétaire dit payant (la plupart du temps en tout cas...).

Vous pouvez convertir vos vidéos au format VP6 on2 Flix en ligne sur le site encoding.com, il vous propose même de convertir gratuitement vos vidéos dans une certaine limite :) .

Voilà ce que je pouvais vous dire sur les formats audio et vidéo supportés par JavaFX. Passons à la pratique, c'est à dire à la réalisation de notre lecteur vidéo :) .

Réaliser un lecteur vidéo

Je vous préviens tout de suite, on va faire le lecteur vidéo le plus simple du monde. C'est juste pour vous montrer un peu comment ça marche...

Notre lecteur contiendrait :

  • un panel vidéo de taille 426x240 dans lequel apparaîtrait la vidéo.

  • Un bouton play/pause.

  • Une barre de lecture qui indiquerait à la fois l'état du téléchargement et la progression de la lecture de la vidéo. Cette barre permettrait aussi de changer la position de lecture de la vidéo.

Voici à peu près l'apparence que nous donnerons à notre lecteur :

Image utilisateur

Vous voyez, c'est vraiment basique... Mais avec ce que vous savez faire en JavaFX, vous pourrez très facilement l'améliorer, lui ajouter des fonctionnalités, l'embellir...

Avant de nous lancer dans le code, décrivons le mécanisme du lecteur média en JavaFX. Pour créer un lecteur d'un média audio ou vidéo dans votre application, il faut créer trois objets de types différents :

  • 1. Un objet de type Media qui représente le média en lui-même.

  • 2. Un objet MediaPlayer qui contient l'objet Media et qui propose toutes les fonctionnalités relatives à la lecture du média : play, pause, volume sonore, position de la lecture, etc...

  • 3. Un objet MediaView qui contient l'objet MediaPlayer et qui permet de régler le cadre dans lequel apparaît la vidéo : width, height, etc...

Image utilisateur

Ça n'a rien de compliqué vous allez voir...

On peut commencer par créer un nouveau projet dans notre IDE Netbeans : File >> New Project, puis sélectionnez dans la cathégorie "Java" le type de projet "Java FX Application", et enfin entrez comme nom de projet "LecteurVideo", et enfin cliquez sur Finish.

Faisons un peu de ménage dans la fonction start() de notre classe LecteurVideo, et ajustons la taille de la scène à 426x270 de façon à ce que notre classe ne contienne plus que ça :

public class LecteurVideo extends Application {
    double width = 426;
    double height = 240;
    
    public static void main(String[] args) {
        Application.launch(LecteurVideo.class, args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Lecteur Video");
        Group root = new Group();
        Scene scene = new Scene(root, width, height, Color.BLACK);
        
        primaryStage.setScene(scene);
        primaryStage.setVisible(true);
    }
}

Création des Media, MediaPlayer et MediaView

Créons maintenant à partir de cet url nos trois objets Media, MediaPlayer et MediaView :

public class LecteurVideo extends Application {
    double width = 426;
    double height = 240;

    Media media;
    MediaPlayer mediaplayer;
    MediaView mediaview;

    public static void main(String[] args) {
        Application.launch(LecteurVideo.class, args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Lecteur Video");
        Group root = new Group();
        Scene scene = new Scene(root, width, height, Color.WHITE);
        
        /****  Objets Media, MediaPlayer et MediaView  ******/
        //Media
        media = new Media("http://www.pianovirtuel.fr/Site_du_zero/javafx.flv");
        
        //MediaPlayer
        mediaplayer = new MediaPlayer(media);
        mediaplayer.setOnReady(new Runnable(){//dès que le lecteur est prêt, on set les start et stop times
            public void run() {
                mediaplayer.setStartTime(Duration.ZERO);
                mediaplayer.setStopTime(media.getDuration().subtract(Duration.valueOf(50)));
            }
        });
        mediaplayer.setOnEndOfMedia(new Runnable(){//dès qu'on arrive à la fin du média : stop
            public void run() {
                mediaplayer.stop();
            }
        });
        
        //MediaView
        mediaview = new MediaView(mediaplayer);
        mediaview.setFitWidth(width);
        mediaview.setFitHeight(height);
        root.getChildren().add(mediaview);

        primaryStage.setScene(scene);
        primaryStage.setVisible(true);
    }
}

Parfait, si vous compilez vous devriez voir notre mediaviewer qui pour l'instant est tout noir :-° .

Création de la barre de fonctionnalités

Créons maintenant tous les éléments de notre barre de fonctionnalités :

Image utilisateur
Fond de la barre de fonctionnalités

Créons un groupe fonctions dans lequel nous ajouterons tous ces éléments et commençons par y insérer le fond de la barre de fonctionnalités :

public class LecteurVideo extends Application {
    //...
    
    @Override
    public void start(Stage primaryStage) {
        //...

        /****  Objets Media, MediaPlayer et MediaView  ******/
        //...
        
        /********  Objets graphiques de la barre des fonctions   *********/
        Group fonctions = new Group();
        
        //création du fond de la barre de fonction
        Rectangle fond = new Rectangle(width,30,Color.web("#333333"));
        fond.setOpacity(0.5);
        fonctions.getChildren().add(fond);
        fonctions.setTranslateY(height-30);
        root.getChildren().add(fonctions);
        
        primaryStage.setScene(scene);
        primaryStage.setVisible(true);
    }
}
Bouton play/pause

Parfait, réalisons maintenant notre bouton play/pause qui devra se comporter de la façon suivante quand on clique dessus :
Si la vidéo n'est pas en cours de lecture, démarrer la lecture grâce à la fonction mediaplayer.play().
Si la vidéo et en cours de lecture, la mettre en pause grâce à la fonction mediaplayer.play().

public class LecteurVideo extends Application {
    double width = 426;
    double height = 240;
    
    Media media;
    MediaPlayer mediaplayer;
    MediaView mediaview;
    
    ImageView image_bouton;
    Image img_play;
    Image img_pause;
    
    ...

    @Override
    public void start(Stage primaryStage) {
        ...

        /****  Objets Media, MediaPlayer et MediaView  ******/
        ...
        
        /********  Objets graphiques de la barre des fonctions   *********/
        Group fonctions = new Group();
        
        //création du fond de la barre de fonction
        ...
        
        //création du bouton play/pause
        Group play_pause = new Group();
        Rectangle fond_bouton = new Rectangle(28,24,Color.web("#111111"));
        fond_bouton.setArcHeight(5);
        fond_bouton.setArcWidth(5);
        fond_bouton.setStroke(Color.LIGHTBLUE);
        img_play = new Image("http://www.pianovirtuel.fr/Site_du_zero/sigleplay.png");
        img_pause = new Image("http://www.pianovirtuel.fr/Site_du_zero/siglepause.png");
        image_bouton = new ImageView(img_play);
        image_bouton.setX(4);
        image_bouton.setY(2);
        play_pause.getChildren().add(fond_bouton);
        play_pause.getChildren().add(image_bouton);
        play_pause.setTranslateX(4);
        play_pause.setTranslateY(4);
        play_pause.setCursor(Cursor.HAND);
        //Quand on clique sur le bouton play/pause, on démarre ou on arrête la vidéo
        play_pause.setOnMouseClicked(new EventHandler<MouseEvent>(){
            public void handle(MouseEvent me){
                if(mediaplayer.getStatus() == MediaPlayer.Status.valueOf("PLAYING")){//pause
                    image_bouton.setImage(img_play);
                    mediaplayer.pause();
                }
                else{//play
                    image_bouton.setImage(img_pause);
                    mediaplayer.play();
                }
            }
        });
        fonctions.getChildren().add(play_pause);
        ...

    }
}

Vous pouvez compiler, vous pourrez démarrer la vidéo et la mettre en pause :) :

Image utilisateur
Barre de lecture

Pour notre barre de lecture, nous allons créer un nouveau groupe barres. Celui-ci comportera trois éléments :

  • 1. Le fond de la barre.

  • 2. La barre de téléchargement. Sa largeur évoluera en fonction du taux de téléchargement de la vidéo. Ce taux de téléchargement est accessible grâce à la propriété : mediaplayer.bufferProgressTimeProperty().

  • 3. La barre de lecture. Sa largeur évoluera en fonction du taux de lecture de la vidéo. Ce taux de lecture étant accessible grâce à la propriété : mediaplayer.currentTimeProperty().

  • De plus, quand on clique sur le groupe barres, cela devra modifier la position courante de la lecture. On peut modifier la position courante grâce à la fonction mediaplayer.seek(time).

public class LecteurVideo extends Application {
    ...

    Rectangle barre_telechargement;
    Rectangle barre_lecture;
    double largeure_barre = 300;
    
    ...

    @Override
    public void start(Stage primaryStage) {
        ...
        
        /****  Objets Media, MediaPlayer et MediaView  ******/
        ...
        
        /********  Objets graphiques de la barre des fonctions   *********/
        ...

        //création du fond de la barre de fonction
        ...
        
        //création du bouton play/pause
        ...
        
        //création de la barre de lecture
        Group barres = new Group();
        barres.setTranslateX(50);
        barres.setTranslateY(5);
        barres.setCursor(Cursor.HAND);
        Rectangle barre_fond = new Rectangle(largeure_barre, 20, Color.web("#111111"));
        barre_telechargement = new Rectangle(0, 20, Color.web("#555555"));
        //On ajuste la longueure de la barre de téléchargement au taux de téléchargement de la vidéo
        mediaplayer.bufferProgressTimeProperty().addListener(new ChangeListener(){
            @Override public void changed(ObservableValue o, Object oldVal, Object newVal){
                barre_telechargement.setWidth(mediaplayer.getBufferProgressTime().divide(mediaplayer.getTotalDuration())*largeure_barre);
            }
        });
        barre_lecture = new Rectangle(0, 20, Color.web("#0078ff"));
        //On ajuste la longueure de la barre de lecture au taux de lecture de la vidéo
        mediaplayer.currentTimeProperty().addListener(new ChangeListener(){
            @Override public void changed(ObservableValue o, Object oldVal, Object newVal){
                barre_lecture.setWidth(mediaplayer.getCurrentTime().divide(mediaplayer.getTotalDuration())*largeure_barre);
            }
        });
        barres.getChildren().add(barre_fond);
        barres.getChildren().add(barre_telechargement);
        barres.getChildren().add(barre_lecture);
        //Quand on clique sur la barre de lecture, le lecteur video change la position de la lecture
        barres.setOnMouseClicked(new EventHandler<MouseEvent>(){
            public void handle(MouseEvent me){
                mediaplayer.seek(Duration.valueOf(me.getX()/largeure_barre*media.getDuration().toMillis()));
                barre_lecture.setWidth((me.getX()/largeure_barre*media.getDuration().toMillis()) / (mediaplayer.getTotalDuration().toMillis())*largeure_barre);
            }
        });
        fonctions.getChildren().add(barres);
        ...
    }
}

Excellent, nous avons créé les trois éléments qui constituent notre barre de fonctionnalité. Vous pouvez compiler pour voir votre premier lecteur vidéo JavaFX :

Image utilisateur

Comme je l'ai dit au début, ce lecteur est très basique pour l'instant, mais avec tout ce que nous avons appris dans ce tutoriel, vous êtes tout à fait capables de l'améliorer.

Par exemple vous pouvez ajouter une fonctionnalité pour régler le son grâce aux fonctions :

mediaplayer.setVolume(value);
mediaplayer.setMute(true/false);

Vous pourriez aussi ajouter un bouton pour passer en mode plein écran grâce à la fonction :

primaryStage.setFullScreen(true/false);

Bref, je fais confiance à votre créativité pour inventer de nouvelles fonctionnalités ;) .

C'est plutôt intéressant de savoir intégrer de la vidéo dans ses applications web... Maintenant vous pouvez dire que vous savez créer de vraies RIAs (Rich Internet Application), avec toutes sortes de formes, d'images, d'effets graphiques et de médias.

Il ne vous reste plus qu'une seule chose à connaître maintenant que vous savez développer vos propres applications JavaFX : les déployer, c'est-à-dire les intégrer dans l'une de vos pages web :) .

Exemple de certificat de réussite
Exemple de certificat de réussite