Play a video and display an image simultaneously

1035621

Hello everyone,

I am new to JavaFX and I would like to know if it is possible to simultaneously play a video and display an image above it in the same scene.

Particularly, I want the image to be displayed in a fixed position.

I have tried using a StackPane layout but I get an error in the following line:

sp.getChildren().add(mediaPlayer);

because the mediaPlayer object cannot be taken as a parameter and a Node object is needed

I have also tried adding both the video and the image in the same scene as seen below with no success (the video is being played but the image is not displayed)

root.getChildren().add(imageView);

Is what I'm trying to do feasible? And if yes, what methods should I use?

Thank you in advance for any answer!

James_D

I have tried using a StackPane layout but I get an error in the following line:

1. sp.getChildren().add(mediaPlayer); 

because the mediaPlayer object cannot be taken as a parameter and a Node object is needed

Wrap the mediaPlayer in a MediaView and add the media view to the container. Don't use a Group as the root pane as in the sample code in the example, though.

I have also tried adding both the video and the image in the same scene as seen below with no success (the video is being played but the image is not displayed)

I think this is because you are using a StackPane, which stacks nodes on top of each other (in Z-order); so if you add the video first it will be obscured by the image. Use a different layout pane: VBox is the simplest. The tutorial has a rundown of all the built-in layout panes.

So you'll do something like this:

public void start(Stage primaryStage) {
     Media media = new Media(...);
     MediaPlayer player = new MediaPlayer(media);
     MediaView mediaView = new MediaView(player);

     Image image = new Image(...);
     ImageView imageView = new ImageView(image);

     VBox root = new VBox(5);
     root.getChildren().add(mediaView);
     root.getChildren().add(imageView);
     
     Scene scene = new Scene(root);
     primaryStage.setScene(scene);
     primaryStage.show();
}

James_D

I have tried using a StackPane layout but I get an error in the following line:

1. sp.getChildren().add(mediaPlayer); 

because the mediaPlayer object cannot be taken as a parameter and a Node object is needed

Wrap the mediaPlayer in a MediaView and add the media view to the container. Don't use a Group as the root pane as in the sample code in the example, though.

I have also tried adding both the video and the image in the same scene as seen below with no success (the video is being played but the image is not displayed)

I think this is because you are using a StackPane, which stacks nodes on top of each other (in Z-order); so if you add the video first it will be obscured by the image. Use a different layout pane: VBox is the simplest. The tutorial has a rundown of all the built-in layout panes.

So you'll do something like this:

public void start(Stage primaryStage) {
     Media media = new Media(...);
     MediaPlayer player = new MediaPlayer(media);
     MediaView mediaView = new MediaView(player);

     Image image = new Image(...);
     ImageView imageView = new ImageView(image);

     VBox root = new VBox(5);
     root.getChildren().add(mediaView);
     root.getChildren().add(imageView);
     
     Scene scene = new Scene(root);
     primaryStage.setScene(scene);
     primaryStage.show();
}

1035621

Thank you for the quick reply James_D!

Following your instructions solved my problem!

Just for reference, I later found out that this could also be done by displaying two stages at the same time using the initOwner method but I don't know If it is a good practice.

Thanks again,

John