Java如何实现静态图片上层叠加播放带透明度的MP4视频

你的代码核心问题是节点层级逻辑和加载时序没处理对，StackPane遵循先添加的节点在底层、后添加的节点在上层的渲染规则，同时要避免视频加载阶段的黑帧提前遮挡底层图片。

修正后可直接运行的代码 #

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.DoubleProperty;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;
import javafx.scene.paint.Color;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import java.io.File;
import java.io.FileInputStream;

public class VideoOverlayDemo extends Application {
    private MediaPlayer player;

    public static void main(String[] args) throws Exception{
        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        // 加载底层静态背景图
        File imgFile = new File("c:\\tpd\\Image.jpg");
        Image backgroundImg = new Image(new FileInputStream(imgFile));
        ImageView backgroundView = new ImageView(backgroundImg);
        // 背景图适配场景尺寸
        backgroundView.fitWidthProperty().bind(stage.widthProperty());
        backgroundView.fitHeightProperty().bind(stage.heightProperty());
        backgroundView.setPreserveRatio(false); // 设为true则保持图片比例留黑边，false则铺满窗口

        // 加载第一个视频
        File videoFile = new File("c:\\tpd\\video.mp4");
        Media media = new Media(videoFile.toURI().toURL().toString());
        player = new MediaPlayer(media);
        MediaView videoView = new MediaView(player);
        // 视频尺寸适配
        DoubleProperty videoWidth = videoView.fitWidthProperty();
        DoubleProperty videoHeight = videoView.fitHeightProperty();
        videoWidth.bind(Bindings.selectDouble(videoView.sceneProperty(), "width"));
        videoHeight.bind(Bindings.selectDouble(videoView.sceneProperty(), "height"));
        videoView.setPreserveRatio(true);
        // 设置视频全局透明度，0为完全透明，1为完全不透明
        videoView.setOpacity(0.6f);

        StackPane root = new StackPane();
        // 注意StackPane子节点顺序：先加的在最底层，后加的在上层
        root.getChildren().addAll(backgroundView, videoView);

        Scene scene = new Scene(root,1920, 1080, Color.BLACK);
        stage.setAlwaysOnTop(true);
        stage.setScene(scene);
        stage.setTitle("myVideo");
        stage.show();

        // 等视频资源加载就绪后再播放，避免加载阶段黑帧遮挡背景图
        player.setOnReady(() -> player.play());
    }
}

多视频叠加实现方法 #

• 每新增一个视频片段，就新建一组Media/MediaPlayer/MediaView实例，将MediaView按层级顺序添加到StackPane的子节点列表中，越晚添加的视频显示层级越高
• 每个MediaView可独立配置参数：
  • 调用setOpacity()设置单独的透明度
  • 调用setLayoutX()/setLayoutY()设置视频在画面上的偏移位置
  • 调用setFitWidth()/setFitHeight()设置视频的播放尺寸
  • 绑定对应MediaPlayer的setStartTime()/setStopTime()控制片段播放区间，监听onEndOfMedia回调实现片段自动切换
• 多视频添加示例：

// 叠加第二个半透明小窗视频
File video2File = new File("c:\\tpd\\video2.mp4");
Media media2 = new Media(video2File.toURI().toURL().toString());
MediaPlayer player2 = new MediaPlayer(media2);
MediaView videoView2 = new MediaView(player2);
videoView2.setFitWidth(400);
videoView2.setFitHeight(300);
videoView2.setLayoutX(100); // 距离窗口左上角X轴偏移
videoView2.setLayoutY(100); // 距离窗口左上角Y轴偏移
videoView2.setOpacity(0.5f);
root.getChildren().add(videoView2); // 后添加的视频在更上层
player2.setOnReady(player2::play);

注意事项 #

• 若需要视频本身内容带透明区域（如抠像效果，而非全局半透明），不要使用H.264编码的MP4，该编码不支持alpha通道，JavaFX原生支持带透明通道的WebM格式，可直接渲染透明区域
• 不再使用的MediaPlayer实例要及时调用dispose()方法释放资源，避免内存泄漏
• 背景图也要绑定场景尺寸做适配，否则会出现图片尺寸和窗口不匹配的显示异常

内容的提问来源于stack exchange，提问作者user2642132