How to add a QVideoWidget in Qt Designer?

Question

I want to insert video in blue box(ui image) but I don't know how to insert video file.

My code is here. I don't know how to add video... Just know example that make video player ...

import sys

from PyQt5 import QtWidgets
from PyQt5 import QtGui
from PyQt5 import uic
from PyQt5 import QtCore
from PyQt5.QtCore import QDir, Qt, QUrl, pyqtSlot

from PyQt5.QtMultimedia import QMediaContent, QMediaPlayer
from PyQt5.QtMultimediaWidgets import QVideoWidget

from PyQt5.QtWidgets import (QApplication, QFileDialog, QHBoxLayout, QLabel,
        QPushButton, QSizePolicy, QSlider, QStyle, QVBoxLayout, QWidget)

dir_audience=''
dir_movie = ''
dir_export = ''
select_emotion = 'happy'

class Form(QtWidgets.QDialog):
    def __init__(self, parent=None):
        QtWidgets.QDialog.__init__(self, parent)
        self.ui = uic.loadUi("highlight_export_form.ui", self)
        self.ui.show()

        self.ui.load_audience.clicked.connect(self.load_audience_clicked)
        self.ui.load_movie.clicked.connect(self.load_movie_clicked)

        self.ui.start_recog.clicked.connect(self.start_recog_clicked)

        self.ui.radio_happy.toggled.connect(self.on_radio_button_toggled)
        self.ui.radio_surprised.toggled.connect(self.on_radio_button_toggled)

    def load_audience_clicked(self, event):
        dir_audience, _ = QFileDialog.getOpenFileName(self, "Open Audience", QDir.homePath())
        self.path_audience.setText(dir_audience)

    def load_movie_clicked(self, event):
        dir_movie, _ = QFileDialog.getOpenFileName(self, "Open Movie", QDir.homePath())
        self.path_movie.setText(dir_movie)

    def start_recog_clicked(self, event):
        self.check_1.setText("start_recognition")

    def on_radio_button_toggled(self):
        if self.radio_happy.isChecked():
            select_emotion='happy'
            self.check_3.setText(select_emotion)

        elif self.radio_surprised.isChecked():
            select_emotion='surprised'
            self.check_3.setText(select_emotion)

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    w = Form()
    sys.exit(app.exec())

Thank you for reading my question.

Answer 1

Qt Designer does not show all the Qt widget, and often we want to add our own widget through Qt, for that there are at least 2 solutions, the first is to create a plugin and load it to Qt Designer, and the other is simpler. promote the widget, the latter is what I will show in this answer.

For this you must make certain minimum changes, I do not know what type of widget is the one you use in the blue box but you must change it to the Widget type that is in the sub-menu of the containers as shown in the following image:

after them you must right click on the widget and select Promote to ..., then a dialogue will appear, in the part of Promoted class name you must place QVideoWidget, and in the part of Header File you must place PyQt5.QtMultimediaWidgets, then press the add button and then Promote:

After that you will be able to use QVideoWidget within your application.

_{In the following link there is an example}

Answer 2

Answer from here was clearer to me:

QWebKit was removed in Qt 5.6. So QWebView is no longer available. Use QWebEngineView as a replacement. In Qt Designer, just add a QWidget to your form and promote it to QWebEngineView (base class: QWidget, header: QWebEngineView). Don't forget to add webenginewidgets to your project file.

Answer 3

• Simlar issue: want add QWebEngineView into Qt Designer
  • for later PySide6 to import and use .ui, exported by Qt Designer
• Solution: add QWidget then Promoted to QWebEngineView
  • Steps
    • drag a new QWidget into your main ui (window)
    • right click QWidget -> Promoted to
    • new popup window, input
      • Base class Name: QWidget
      • Promoted class Name: QWebEngineView
      • Header File: PySide6.QtWebEngineWidgets
        • == parent class
      • Global Include: not selected
      • -> Screenshot
        • 
    • click: Add
    • click: Promote