Qt QML 5.12中如何显示带Alpha通道的透明视频？

Qt 5.12的原生Video组件默认无法直接渲染带Alpha通道的视频——底层渲染路径会忽略透明信息，将透明区域填充为黑色。但可以通过自定义C++组件结合QML的方式实现需求，以下是具体方案：

核心解决方案：自定义视频渲染组件 #

通过QMediaPlayer获取视频帧，在自定义的QQuickPaintedItem子类中手动绘制带Alpha通道的帧内容，确保透明区域被正确保留。

步骤1：编写C++自定义组件 #

创建一个继承自QQuickPaintedItem的类，负责接收视频帧并渲染：

#include <QQuickPaintedItem>
#include <QMediaPlayer>
#include <QVideoFrame>
#include <QPainter>

class TransparentVideoItem : public QQuickPaintedItem
{
    Q_OBJECT
    Q_PROPERTY(QUrl source READ source WRITE setSource NOTIFY sourceChanged)
    Q_PROPERTY(bool autoPlay READ autoPlay WRITE setAutoPlay NOTIFY autoPlayChanged)

public:
    explicit TransparentVideoItem(QQuickItem *parent = nullptr)
        : QQuickPaintedItem(parent), m_autoPlay(false)
    {
        m_player = new QMediaPlayer(this);
        connect(m_player, &QMediaPlayer::videoFrameChanged, this, &TransparentVideoItem::onVideoFrameChanged);
        setFlag(QQuickItem::ItemHasContents, true);
    }

    QUrl source() const { return m_source; }
    void setSource(const QUrl &source) {
        if (m_source != source) {
            m_source = source;
            m_player->setMedia(m_source);
            if (m_autoPlay) m_player->play();
            emit sourceChanged();
        }
    }

    bool autoPlay() const { return m_autoPlay; }
    void setAutoPlay(bool autoPlay) {
        if (m_autoPlay != autoPlay) {
            m_autoPlay = autoPlay;
            if (m_autoPlay && m_player->mediaStatus() == QMediaPlayer::LoadedMedia) {
                m_player->play();
            }
            emit autoPlayChanged();
        }
    }

    void paint(QPainter *painter) override {
        if (!m_currentFrame.isValid()) return;

        // 将视频帧转换为带Alpha的QImage
        QImage frameImage;
        if (m_currentFrame.map(QAbstractVideoBuffer::ReadOnly)) {
            // 根据视频格式选择对应的QImage格式，此处适配RGBA8888（可根据实际调整）
            frameImage = QImage(m_currentFrame.bits(),
                                m_currentFrame.width(),
                                m_currentFrame.height(),
                                m_currentFrame.bytesPerLine(),
                                QImage::Format_RGBA8888).copy();
            m_currentFrame.unmap();
        } else {
            //  fallback：使用Qt内置转换（部分格式可能丢失Alpha，需测试）
            frameImage = m_currentFrame.image();
        }

        if (!frameImage.isNull()) {
            painter->drawImage(boundingRect(), frameImage);
        }
    }

signals:
    void sourceChanged();
    void autoPlayChanged();

private slots:
    void onVideoFrameChanged(const QVideoFrame &frame) {
        m_currentFrame = frame;
        update(); // 触发重绘
    }

private:
    QUrl m_source;
    bool m_autoPlay;
    QMediaPlayer *m_player;
    QVideoFrame m_currentFrame;
};

步骤2：注册QML类型 #

在main.cpp中注册自定义组件，使其能在QML中调用：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "transparentvideoitem.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    // 注册自定义组件到QML
    qmlRegisterType<TransparentVideoItem>("CustomComponents", 1, 0, "TransparentVideo");

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

步骤3：QML中使用自定义组件 #

在QML文件中引入组件，并叠加在其他UI元素上方：

import QtQuick 2.12
import QtQuick.Controls 2.12
import CustomComponents 1.0

Item {
    width: 800
    height: 600

    // 后方的UI元素
    Button {
        text: "透明视频后方的按钮"
        anchors.centerIn: parent
        font.pixelSize: 24
    }

    // 带Alpha通道的视频组件
    TransparentVideo {
        anchors.fill: parent
        source: "qrc:/animated_logo.mov"
        autoPlay: true
    }
}

额外注意事项 #

1. 解码器兼容性：确保Qt 5.12的Multimedia模块支持ProRes 4444 XQ解码。Windows平台可能需要安装QuickTime或第三方解码器；Linux平台需依赖GStreamer的ProRes插件。
2. 帧格式转换：如果上述代码中直接转换QVideoFrame为QImage丢失Alpha通道，可使用FFmpeg将原视频转码为RGBA编码的格式（如ProRes 4444标准版本），命令示例：

   ffmpeg -i input.mov -c:v prores_ks -profile:v 4444 -alpha_bits 16 output_rgba.mov
   

3. 性能优化：对于高分辨率视频，可考虑使用OpenGL纹理渲染替代QPainter，进一步提升帧率。

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