How to create a transparent QWidget on top of a sibling QVideoWidget? - qt

Question

I want to add some controls and information on top of a fullscreen QVideoWidget. So I create a QMainWindow ui and then promote the central widget to QVideoWidget as:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>VideoScreen</class>
<widget class="QMainWindow" name="VideoScreen">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>800</width>
<height>600</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<widget class="QVideoWidget" name="videoScreen">
<property name="styleSheet">
<string notr="true"/>
</property>
</widget>
</widget>
<customwidgets>
<customwidget>
<class>QVideoWidget</class>
<extends>QWidget</extends>
<header>QVideoWidget</header>
<container>1</container>
</customwidget>
</customwidgets>
<resources/>
<connections/>
</ui>
And ControlBoards ui:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>ControlBoard</class>
<widget class="QWidget" name="ControlBoard">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>1044</width>
<height>520</height>
</rect>
</property>
<property name="windowTitle">
<string>Form</string>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<widget class="QLabel" name="title">
<property name="geometry">
<rect>
<x>210</x>
<y>90</y>
<width>59</width>
<height>17</height>
</rect>
</property>
<property name="styleSheet">
<string notr="true">
</string>
</property>
<property name="text">
<string>Title</string>
</property>
</widget>
<widget class="QPushButton" name="play">
<property name="geometry">
<rect>
<x>320</x>
<y>120</y>
<width>101</width>
<height>31</height>
</rect>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="text">
<string>play</string>
</property>
</widget>
<widget class="QPushButton" name="stop">
<property name="geometry">
<rect>
<x>210</x>
<y>120</y>
<width>101</width>
<height>31</height>
</rect>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="text">
<string>stop</string>
</property>
</widget>
</widget>
<resources/>
<connections/>
</ui>
Then in videoscreen.cpp, I also add the ControlBoard as sibling of QVideoWidget:
VideoScreen::VideoScreen(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::VideoScreen), player(new QMediaPlayer)
{
ui->setupUi(this);
player->setVideoOutput(ui->videoScreen);
ui->videoScreen->lower();
ControlBoard *cb = new ControlBoard(this);
}
When I play a video, the result:
How to make the ControlBoard be transparent so that we can see the video behind?
I tried some code in ControlBoard constructor:
// setWindowFlags(Qt::Widget | Qt::FramelessWindowHint);
// setAttribute(Qt::WA_NoSystemBackground);
// setAttribute(Qt::WA_TranslucentBackground);
// setAttribute(Qt::WA_PaintOnScreen);
// setAttribute(Qt::WA_TransparentForMouseEvents);
// setAutoFillBackground(false);
But this just show the parent's background, not the sibling video. Does Qt5 support this? Thanks!
UPDATE:
I also tried on some other like this (base on):
class OverlayWidget : public QWidget
{
void newParent() {
if (!parent()) return;
parent()->installEventFilter(this);
raise();
}
public:
explicit OverlayWidget(QWidget * parent = {}) : QWidget{parent} {
setAttribute(Qt::WA_NoSystemBackground);
setAttribute(Qt::WA_TransparentForMouseEvents);
newParent();
}
protected:
//! Catches resize and child events from the parent widget
bool eventFilter(QObject * obj, QEvent * ev) override {
if (obj == parent()) {
if (ev->type() == QEvent::Resize)
{
// resize(static_cast<QResizeEvent*>(ev)->size());
}
else if (ev->type() == QEvent::ChildAdded)
raise();
}
return QWidget::eventFilter(obj, ev);
}
//! Tracks parent widget changes
bool event(QEvent* ev) override {
if (ev->type() == QEvent::ParentAboutToChange) {
if (parent()) parent()->removeEventFilter(this);
}
else if (ev->type() == QEvent::ParentChange)
newParent();
return QWidget::event(ev);
}
};
class LoadingOverlay : public OverlayWidget
{
public:
LoadingOverlay(QWidget * parent = {}) : OverlayWidget{parent} {
setAttribute(Qt::WA_TranslucentBackground);
}
protected:
void paintEvent(QPaintEvent *) override {
QPainter p(this);
// p.fillRect(rect(), {10, 10, 10, 100});
p.setPen({200, 200, 255});
p.setFont({"arial,helvetica", 48});
p.drawText(rect(), "Loading...", Qt::AlignHCenter | Qt::AlignVCenter);
}
};
int main(int argc, char * argv[])
{
QApplication a(argc, argv);
QMainWindow window;
QVideoWidget central(&window);
central.setMinimumSize(600, 700);
window.setCentralWidget(&central);
QMediaPlayer player;
player.setMedia(QUrl::fromLocalFile("dolbycanyon.mov"));
player.setVideoOutput(&central);
LoadingOverlay overlay(&window);
overlay.resize(400, 300);
overlay.setWindowOpacity(.4);
overlay.setWindowFlags(Qt::Widget | Qt::FramelessWindowHint);
overlay.setAttribute(Qt::WA_PaintOnScreen);
overlay.setAutoFillBackground(false);
// QTimer::singleShot(5000, &overlay, SLOT(hide()));
// QTimer::singleShot(7000, &player, SLOT(play()));
player.play();
window.show();
return a.exec();
}
But the result is still opaque, not transparent:

Answer 1

Demo of transparent background overlay on the video:
#include <QApplication>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QGraphicsVideoItem>
#include <QMediaPlayer>
#include <QFileDialog>
#include <QPushButton>
#include <QLabel>
#include <QGraphicsProxyWidget>
const QSizeF VideoItemSize(500, 500);
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QMediaPlayer player;
QGraphicsView v;
QGraphicsScene scene;
QGraphicsVideoItem video;
v.setScene(&scene);
video.setSize(VideoItemSize);
scene.setSceneRect(QRectF(QPointF(0, 0), VideoItemSize)); // VideoItem full fill the scene
scene.addItem(&video);
player.setVideoOutput(&video);
player.setMedia(QMediaContent(QFileDialog::getOpenFileUrl()));
// Recommend using QGraphicsItems for overlay component
QGraphicsTextItem text("Loading...",&video);
text.setPos(100, 150);
// If you need a button...
QPushButton button("ButtonTest");
QGraphicsProxyWidget* proxyButton = scene.addWidget(&button);
proxyButton->setPos(100, 200);
// Instead of QGraphicsItems, if you really need a QWidget...
QLabel label("LabelTest");
label.setAttribute(Qt::WA_TranslucentBackground); // You can delete this line to see different
QGraphicsProxyWidget* proxyLabel = scene.addWidget(&label);
proxyLabel->setPos(100, 250);
v.show();
player.play();
return a.exec();
}