java - 使用一个 Controller 播放/暂停多个 MediaView JavaFX FXML

Question

目前，我有一个包含多个媒体 View 的场景，每个媒体 View 都有自己的播放和暂停按钮，采用 fxml 格式。我想知道是否有一种方法可以播放/暂停单击哪个媒体 View 的按钮，而无需为每个媒体 View 制作播放/暂停 Controller 。下面是我不希望采用的乏味方式的示例。

FXML

<StackPane alignment="CENTER">
                        <MediaView fx:id="mediaView" styleClass="mediaView">
                            <mediaPlayer>
                                <MediaPlayer fx:id="mediaPlayer" autoPlay="false">
                                    <media>
                                        <Media source="@../vid/vid1.mp4"/>
                                    </media>
                                </MediaPlayer>
                            </mediaPlayer>
                        </MediaView>

                        <Button fx:id="btn_play1" onAction="#handlePlay1" alignment="CENTER" styleClass="btn_play"/>
                        <Button fx:id="btn_pause1" onAction="#handlePause1" alignment="CENTER" styleClass="btn_pause" visible="false"/>
</StackPane>

<StackPane alignment="CENTER">
                        <MediaView fx:id="mediaView2" styleClass="mediaView">
                            <mediaPlayer>
                                <MediaPlayer fx:id="mediaPlayer2" autoPlay="false">
                                    <media>
                                        <Media source="@../vid/vid2.mp4"/>
                                    </media>
                                </MediaPlayer>
                            </mediaPlayer>
                        </MediaView>

                        <Button fx:id="btn_play2" onAction="#handlePlay2" alignment="CENTER" styleClass="btn_play"/>
                        <Button fx:id="btn_pause2" onAction="#handlePause2" alignment="CENTER" styleClass="btn_pause" visible="false"/> 

Controller

@FXML
private void handlePause1(ActionEvent event) throws IOException {
    mediaPlayer.pause();
    btn_pause1.setVisible(false);
    btn_play1.setVisible(true);

}

@FXML
private void handlePlay1(ActionEvent event) throws IOException {
    mediaPlayer.play();
    btn_play1.setVisible(false);
    btn_pause1.setVisible(true);
    mediaActive = true;

}

@FXML
private void handlePause2(ActionEvent event) throws IOException {
    mediaPlayer1.pause();
    btn_pause2.setVisible(false);
    btn_play2.setVisible(true);

}

@FXML
private void handlePlay2(ActionEvent event) throws IOException {
    mediaPlayer1.play();
    btn_play2.setVisible(false);
    btn_pause2.setVisible(true);
    mediaActive = true;

}

Answer 1

考虑创建一个 custom component带按钮的媒体 View 。

基本思想是这样的

package application;

import java.io.IOException;

import javafx.beans.NamedArg;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.beans.property.ReadOnlyObjectProperty ;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.scene.media.MediaPlayer;

public class ControlledMediaView extends StackPane {


    @FXML
    private MediaPlayer mediaPlayer ;

    @FXML
    private Button playButton ;

    @FXML
    private Button pauseButton ;

    public ControlledMediaView(@NamedArg("mediaURL") String mediaURL) throws IOException {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("ControlledMediaView.fxml"));
        loader.setRoot(this);
        loader.setController(this);
        loader.getNamespace().put("mediaURL", mediaURL);
        loader.load();
    }

    public void initialize() {
        playButton.visibleProperty().bind(mediaPlayer.statusProperty().isNotEqualTo(MediaPlayer.Status.PLAYING));
        pauseButton.visibleProperty().bind(mediaPlayer.statusProperty().isEqualTo(MediaPlayer.Status.PLAYING));
    }

    @FXML
    private void pause() {
        mediaPlayer.pause();
    }

    @FXML
    private void play() {
        mediaPlayer.play();
    }

    public ReadOnlyObjectProperty<MediaPlayer.Status> statusProperty() {
        return mediaPlayer.statusProperty();
    }

    public final MediaPlayer.Status getStatus() {
        return statusProperty().get();
    }

}

使用 ControlledMediaView.fxml(在同一包中):

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.media.Media?>
<?import javafx.scene.media.MediaPlayer?>
<?import javafx.scene.media.MediaView?>

<fx:root xmlns:fx="http://javafx.com/fxml/1" type="StackPane">
    <MediaView fx:id="mediaView" styleClass="mediaView">
        <mediaPlayer>
            <MediaPlayer fx:id="mediaPlayer" autoPlay="false">
                <media>
                    <Media source="${mediaURL}" />
                </media>
            </MediaPlayer>
        </mediaPlayer>
    </MediaView>

    <Button fx:id="playButton" onAction="#play" alignment="CENTER" styleClass="btn_play" />
    <Button fx:idf="pauseButton" onAction="#pause" alignment="CENTER" styleClass="btn_pause" />
</fx:root>

那么你的主要 FXML 就可以做到

<?xml version="1.0" encoding="UTF-8"?>

<?import application.ControlledMediaView?>

<!-- ... -->

<ControlledMediaView mediaURL="@../vid/vid1.mp4"/>
<ControlledMediaView mediaURL="@../vid/vid2.mp4"/>

<!-- ... -->

您可能需要做一些工作来确保正确传达 URL；另外，如果您想使用 SceneBuilder，则需要将 ControlledMediaView 及其 FXML 打包到 jar 文件中并将其导入到 SceneBuilder。