How to Add a Qvideowidget in Qt Designer

How to add a QVideoWidget in Qt Designer?

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}

How to play video in a QVideoWidget promoted in Qt Designer?

You only have to inherit from the widget selected in Qt Designer and use the generated design, then use a QMediaPlayer and then set it to the QVideoWidget:

main.py

from PyQt5 import QtCore, QtGui, QtWidgets, QtMultimedia

from GUI import Ui_MainWindow

class MainWindow(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self, *args, **kwargs):
        QtWidgets.QMainWindow.__init__(self, *args, **kwargs)
        self.setupUi(self)

        self.mediaPlayer = QtMultimedia.QMediaPlayer(self)
        self.mediaPlayer.setVideoOutput(self.widget)
        # fileName = "/path/of/your/local_file"
        # url = QtCore.QUrl.fromLocalFile(fileName)
        url = QtCore.QUrl("http://clips.vorwaerts-gmbh.de/VfE_html5.mp4")
        self.mediaPlayer.setMedia(QtMultimedia.QMediaContent(url))
        self.mediaPlayer.play()

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    w = MainWindow()
    w.show()
    sys.exit(app.exec_())

How to play a local video in a Qt Widgets Application, in Qt creator?

You are looking for Qt Multimedia Widgets. (You might need to install extra packages when running Linux).

The basic idea goes like this:

• On the UI side of things you use a QVideoWidget. This is where the video is displayed.
  
  • This is what you would add to your .ui file.
  • Note the fullScreen property.
• On the logic side of things you use a QMediaPlayer which controls what is played and when it's played.
  
  • The two are connected by calling QMediaPlayer::setVideoOutput(yourVideoWidgetGoesHere);.
  • Then you add a QMediaPlaylist to your QMediaPlayer.
  • Finally call QMediaPlayer::play() and you should be good to go

Then you want some basic controls if this works so far. QMediaPlayer provides the following slots that exactly do as their names suggest:

• pause()
• play()
• stop()
• setPosition(int), argument is in milliseconds. duration() might be of interest.
• setVolume(int) and setMuted(bool). Volume goes from 0 to 100.
• setPlaybackRate(double)
• Metadata is available via metaData(QString key): http://qt-project.org/doc/qt-5/qmediaobject.html#metaData

Each of these also has a corresponding change signal, very interesting for you is probably the positionChanged(int) signal to update a slider or something similar with the current position.

Basic example courtesy of the Qt documentation:

player = new QMediaPlayer;

playlist = new QMediaPlaylist(player);
playlist->addMedia(QUrl("http://example.com/myclip1.mp4"));
playlist->addMedia(QUrl("http://example.com/myclip2.mp4"));

videoWidget = new QVideoWidget;
player->setVideoOutput(videoWidget);

videoWidget->show();
playlist->setCurrentIndex(1);
player->play(); 

How to insert a web browser in Python QT Designer

A simple solution is to use QWebEngineView, in my case I can find it in Qt Designer:

But if you do not have it, there is no problem, for that there is to promote a widget. In a previous answer I point out how it is done with QVideoWidget, but in your case you should only change

Promoted class name: QWebEngineView
Header file: PyQt5.QtWebEngineWidgets

test.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Form</class>
 <widget class="QWidget" name="Form">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout">
   <item>
    <widget class="QWebEngineView" name="widget" native="true"/>
   </item>
  </layout>
 </widget>
 <customwidgets>
  <customwidget>
   <class>QWebEngineView</class>
   <extends>QWidget</extends>
   <header>PyQt5.QtWebEngineWidgets</header>
   <container>1</container>
  </customwidget>
 </customwidgets>
 <resources/>
 <connections/>
</ui>

main.py

import os
import sys

from PyQt5 import QtCore, QtWidgets, QtWebEngineWidgets, uic

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    path_ui = os.path.join(os.path.dirname(__file__), "test.ui")
    window = uic.loadUi(path_ui)
    window.widget.load(QtCore.QUrl("https://stackoverflow.com/"))
    window.show()
    sys.exit(app.exec_())

---

Related Topics