在JavaFX中制作视频（媒体）播放器会占用尽可能多的空间但不再需要
我之前问过这个问题：How do I make JavaFX MediaView stretch and shrink media to fill/fit parent container?关于使JavaFX媒体播放器扩展以填充父级。不幸的是，通过视频周围的窗格进行黑客攻击会使控制器远离视频：
颜色只是为了理解布局是如何运作的。视频播放器由此FXML组成：
<VBox alignment="TOP_CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" spacing="10.0" style="-fx-background-color: red;" HBox.hgrow="ALWAYS">
<Pane fx:id="mediaViewPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0"
minWidth="0.0" VBox.vgrow="ALWAYS" style="-fx-background-color: green;">
<MediaView fx:id="tutorialPlayer" managed="false" />
</Pane>
<Slider fx:id="timeSlider" VBox.vgrow="NEVER">
<VBox.margin>
<Insets />
</VBox.margin>
</Slider>
<HBox alignment="TOP_CENTER" spacing="10.0" style="-fx-background-color: magenta;" VBox.vgrow="SOMETIMES">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<Button fx:id="playButton" minHeight="40.0" minWidth="40.0" mnemonicParsing="false" onAction="#play">
<graphic>
<FontIcon iconLiteral="fas-play" iconSize="25" />
</graphic>
</Button>
<Button fx:id="pauseButton" managed="false" minHeight="40.0" minWidth="40.0" mnemonicParsing="false" onAction="#pause" visible="false">
<graphic>
<FontIcon iconLiteral="fas-pause" iconSize="25" />
</graphic>
</Button>
<Button fx:id="restartButton" disable="true" minHeight="40.0" minWidth="40.0" mnemonicParsing="false" onAction="#restart">
<graphic>
<FontIcon iconLiteral="fas-retweet" iconSize="25" />
</graphic>
</Button>
<Button fx:id="muteButton" minHeight="40.0" minWidth="40.0" mnemonicParsing="false" onAction="#mute">
<graphic>
<FontIcon iconLiteral="fas-volume-up" iconSize="25" />
</graphic>
</Button>
<Button fx:id="unmuteButton" managed="false" minHeight="40.0" minWidth="40.0" mnemonicParsing="false" onAction="#unmute" visible="false">
<graphic>
<FontIcon iconLiteral="fas-volume-off" iconSize="25" />
</graphic>
</Button>
<Slider fx:id="volumeSlider" blockIncrement="0.1" max="1.0" value="1.0" />
</HBox>
<HBox.margin>
<Insets />
</HBox.margin>
<opaqueInsets>
<Insets />
</opaqueInsets>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
</VBox>
虽然调整大小的hacky代码是这样的：
// Resize the video to fit and fill the allocated space. Why isn't this the default?????
InvalidationListener resizeTutorialPlayer = observable -> {
tutorialPlayer.setFitWidth(mediaViewPane.getWidth());
tutorialPlayer.setFitHeight(mediaViewPane.getHeight());
Bounds actualVideoSize = tutorialPlayer.getLayoutBounds(); // After setting a big fit width and height, the layout bounds match the video size. Not sure why and this feels fragile.
tutorialPlayer.setX((mediaViewPane.getWidth() - actualVideoSize.getWidth()) / 2);
tutorialPlayer.setY((mediaViewPane.getHeight() - actualVideoSize.getHeight()) / 2);
};
mediaViewPane.heightProperty().addListener(resizeTutorialPlayer);
mediaViewPane.widthProperty().addListener(resizeTutorialPlayer);
如何在尊重宽高比功能的同时尽量使用尽可能大的内容，同时保留视频旁边的视频控制器？
1 个答案:
答案 0 :(得分：1)
您可以通过将控件和媒体视图包装在另一个窗格（VBox？）中，然后在设置媒体视图fitHeight时减去控件的高度，来使用当前策略。属性。然后只需配置该窗格，使其集中所有内容。
说实话，我尽量避免使用绑定和监听器来管理布局。有时这是不可避免的，但是一旦达到某个临界点，最好通过继承Pane来定义自定义布局。根据我的判断，我上面列出的策略超出了临界点（当然，你的里程可能会有所不同）。
所以我专门定义了一个布局窗格来管理它。这不是太糟糕;只需覆盖各种computeXXWidth/Height()方法和layoutChildren()方法：
package mediaviewlayout;
import javafx.beans.NamedArg;
import javafx.geometry.Bounds;
import javafx.scene.Node;
import javafx.scene.layout.Pane;
import javafx.scene.media.MediaView;
public class MediaViewLayout extends Pane {
private final MediaView mediaView ;
private final Node content ;
private static final double SPACING = 5 ; // can make this configurable if needed...
public MediaViewLayout(
@NamedArg("mediaView") MediaView mediaView,
@NamedArg("content") Node content) {
this.mediaView = mediaView ;
this.content = content ;
this.getChildren().addAll(mediaView, content);
}
@Override
public double computeMinWidth(double height) {
return Math.max(mediaView.minWidth(height), content.minWidth(height));
}
@Override
public double computePrefWidth(double height) {
return Math.max(mediaView.prefWidth(height), content.prefWidth(height));
}
@Override
public double computeMaxWidth(double height) {
return Math.min(mediaView.maxWidth(height), content.maxWidth(height));
}
@Override
public double computeMinHeight(double width) {
return mediaView.minHeight(width) + content.minHeight(width) + SPACING ;
}
@Override
public double computePrefHeight(double width) {
return mediaView.prefHeight(width) + content.prefHeight(width) + SPACING ;
}
@Override
public double computeMaxHeight(double width) {
return mediaView.maxHeight(width) + content.minHeight(width) + SPACING ;
}
@Override
protected void layoutChildren() {
double width = getWidth();
double height = getHeight();
double contentHeight = content.prefHeight(-1);
double availableHeight = height - SPACING - contentHeight ;
mediaView.setFitWidth(width);
mediaView.setFitHeight(availableHeight);
Bounds actualMediaBounds = mediaView.getBoundsInLocal();
double totalUsedHeight = actualMediaBounds.getHeight() + SPACING + contentHeight ;
double mediaX = (width - actualMediaBounds.getWidth()) / 2 ;
double mediaY = (height - totalUsedHeight) / 2;
mediaView.relocate(mediaX, mediaY);
content.resizeRelocate(0, mediaY+actualMediaBounds.getHeight()+SPACING, width, contentHeight);
}
}
这始终将content置于媒体视图下方。如果您希望使其更具可配置性和可恢复性，可以引入其他属性，例如ObjectProperty<Side>。
然后你可以用Java来测试它：
package mediaviewlayout;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Slider;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;
import javafx.stage.Stage;
public class MediaViewTest extends Application {
private static final String MEDIA_URL = "http://download.oracle.com/otndocs/products/javafx/oow2010-2.flv";
@Override
public void start(Stage primaryStage) throws Exception {
MediaView mediaView = new MediaView();
mediaView.setPreserveRatio(true);
MediaPlayer mediaPlayer = new MediaPlayer(new Media(MEDIA_URL));
mediaPlayer.setAutoPlay(true);
mediaView.setMediaPlayer(mediaPlayer);
VBox controls = new VBox(5);
controls.setAlignment(Pos.CENTER);
Slider slider = new Slider();
controls.getChildren().add(slider);
Button play = new Button("Play");
HBox buttons = new HBox(5, play, new Button("Restart"), new Button("Volume"), new Slider());
buttons.setAlignment(Pos.TOP_CENTER);
controls.getChildren().add(buttons);
MediaViewLayout layout = new MediaViewLayout(mediaView, controls);
Scene scene = new Scene(layout, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
或在FXML中：
<?xml version="1.0" encoding="UTF-8"?>
<?import mediaviewlayout.MediaViewLayout?>
<?import javafx.scene.media.Media?>
<?import javafx.scene.media.MediaPlayer?>
<?import javafx.scene.media.MediaView?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<MediaViewLayout xmlns:fx="http://javafx.com/fxml/1" style="-fx-background-color: green;">
<mediaView>
<MediaView>
<mediaPlayer>
<MediaPlayer autoPlay="true">
<media>
<Media source="http://download.oracle.com/otndocs/products/javafx/oow2010-2.flv"/>
</media>
</MediaPlayer>
</mediaPlayer>
</MediaView>
</mediaView>
<content>
<VBox spacing="5" style="-fx-background-color: red;">
<Slider/>
<HBox spacing="5" alignment="TOP_CENTER" style="-fx-background-color: magenta;">
<Button text="Play"/>
<Button text="Restart"/>
<Button text="Volume"/>
<Slider/>
</HBox>
</VBox>
</content>
</MediaViewLayout>
与
package mediaviewlayout;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class MediaViewTest extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
MediaViewLayout layout = FXMLLoader.load(getClass().getResource("MediaViewLayoutTest.fxml"));
Scene scene = new Scene(layout, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
FXML版本截图：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？