pythonpyqtpyqt5qvideowidget

Display widget on top of QVideoWidget with QMediaPlayer


What I want to achieve is to have a button or a widget to be displayed on top of a QVideoWidget. Following this example of a sample video player, I tried to add a button on top of the QVideoWidget with the following code

self.button= QPushButton(videoWidget)

The button is displayed properly just as it should, but once I start playing the video file I open, the button disappears. I noticed if I hover my mouse over the location of the button, it briefly reappears before it disappears again, which makes me think that the button is being hidden by the QMediaPlayer which is being rerendered on top of everything for every frame.

How can I keep the button on top while the video is playing?


Solution

  • That is a known problem since the drawing of the video is not directly done by Qt but OpenGL, a solution is to have a widget where the QVideoWidget is placed and in that widget place the button:

    QWidget(container)
     ├── QVideoWidget
     └── QPushButton
    

    Code:

    # !/usr/bin/env python
    
    import sys
    
    from PyQt5 import QtCore, QtGui, QtWidgets, QtMultimedia, QtMultimediaWidgets
    
    
    class VideoWindow(QtWidgets.QMainWindow):
        def __init__(self, parent=None):
            super(VideoWindow, self).__init__(parent)
            self.setWindowTitle("PyQt Video Player Widget Example - pythonprogramminglanguage.com")
    
            self.mediaPlayer = QtMultimedia.QMediaPlayer(None, QtMultimedia.QMediaPlayer.VideoSurface)
    
            videoWidget = QtMultimediaWidgets.QVideoWidget()
    
            container = QtWidgets.QWidget()
            lay = QtWidgets.QVBoxLayout(container)
            lay.setContentsMargins(0, 0, 0, 0)
            lay.addWidget(videoWidget)
    
            buttonn = QtWidgets.QPushButton("button", container)
    
    
            self.playButton = QtWidgets.QPushButton()
            self.playButton.setEnabled(False)
            self.playButton.setIcon(self.style().standardIcon(QtWidgets.QStyle.SP_MediaPlay))
            self.playButton.clicked.connect(self.play)
    
            self.positionSlider = QtWidgets.QSlider(QtCore.Qt.Horizontal)
            self.positionSlider.setRange(0, 0)
            self.positionSlider.sliderMoved.connect(self.setPosition)
    
            self.errorLabel = QtWidgets.QLabel()
            self.errorLabel.setSizePolicy(QtWidgets.QSizePolicy.Preferred,
                                          QtWidgets.QSizePolicy.Maximum)
    
            # Create new action
            openAction = QtWidgets.QAction(QtGui.QIcon('open.png'), '&Open', self)
            openAction.setShortcut('Ctrl+O')
            openAction.setStatusTip('Open movie')
            openAction.triggered.connect(self.openFile)
    
            # Create exit action
            exitAction = QtWidgets.QAction(QtGui.QIcon('exit.png'), '&Exit', self)
            exitAction.setShortcut('Ctrl+Q')
            exitAction.setStatusTip('Exit application')
            exitAction.triggered.connect(self.close)
    
            # Create menu bar and add action
            menuBar = self.menuBar()
            fileMenu = menuBar.addMenu('&File')
            # fileMenu.addAction(newAction)
            fileMenu.addAction(openAction)
            fileMenu.addAction(exitAction)
    
            # Create a widget for window contents
            wid = QtWidgets.QWidget(self)
            self.setCentralWidget(wid)
    
            # Create layouts to place inside widget
            controlLayout = QtWidgets.QHBoxLayout()
            controlLayout.setContentsMargins(0, 0, 0, 0)
            controlLayout.addWidget(self.playButton)
            controlLayout.addWidget(self.positionSlider)
    
            layout = QtWidgets.QVBoxLayout()
            layout.addWidget(container)
            layout.addLayout(controlLayout)
            layout.addWidget(self.errorLabel)
    
            # Set widget to contain window contents
            wid.setLayout(layout)
    
            self.mediaPlayer.setVideoOutput(videoWidget)
            self.mediaPlayer.stateChanged.connect(self.mediaStateChanged)
            self.mediaPlayer.positionChanged.connect(self.positionChanged)
            self.mediaPlayer.durationChanged.connect(self.durationChanged)
            self.mediaPlayer.error.connect(self.handleError)
    
        def openFile(self):
            fileName, _ = QtWidgets.QFileDialog.getOpenFileName(self, "Open Movie",
                                                      QtCore.QDir.homePath())
    
            if fileName:
                self.mediaPlayer.setMedia(
                    QtMultimedia.QMediaContent(QtCore.QUrl.fromLocalFile(fileName)))
                self.playButton.setEnabled(True)
    
        def play(self):
            if self.mediaPlayer.state() == QtMultimedia.QMediaPlayer.PlayingState:
                self.mediaPlayer.pause()
            else:
                self.mediaPlayer.play()
    
        def mediaStateChanged(self, state):
            if self.mediaPlayer.state() == QtMultimedia.QMediaPlayer.PlayingState:
                self.playButton.setIcon(
                    self.style().standardIcon(QtWidgets.QStyle.SP_MediaPause))
            else:
                self.playButton.setIcon(
                    self.style().standardIcon(QtWidgets.QStyle.SP_MediaPlay))
    
        def positionChanged(self, position):
            self.positionSlider.setValue(position)
    
        def durationChanged(self, duration):
            self.positionSlider.setRange(0, duration)
    
        def setPosition(self, position):
            self.mediaPlayer.setPosition(position)
    
        def handleError(self):
            self.playButton.setEnabled(False)
            self.errorLabel.setText("Error: " + self.mediaPlayer.errorString())
    
    
    if __name__ == '__main__':
        app = QtWidgets.QApplication(sys.argv)
        player = VideoWindow()
        player.resize(640, 480)
        player.show()
        sys.exit(app.exec_())
    

    Output:

    enter image description here