如何在QML中调用在C++中定义的Video MediaPlayer

如果我们直接使用QML，我们可以很方便地利用如下的代码来播放我们的视频文件：

  Rectangle {
      width: 800
      height: 600
      color: "black"

      MediaPlayer {
          id: player
          source: "file://video.webm"
          autoPlay: true
      }

      VideoOutput {
          id: videoOutput
          source: player
          anchors.fill: parent
      }
  }

如果我们直接使用我们的Qt C++代码，我们也可以利用QMediaPlayer来结合我们QWidget来播放我们的视频文件。我们可以在Qt SDK中找到相应的例子。

假如，如果我们的项目需要，我们需要在C++代码中加入playlist的管理，这样我们必须使用QMediaPlayer来播放我们的多媒体文件，但是，我们需要在QML中显示我们的视频。那么我们怎么可以把我们的视频在QML中显示呢？

为此目的，我们可以定义一个叫做MyMediaPlayer的类。

mymediaplay.h

#ifndef MYMEDIAPLAYER_H
#define MYMEDIAPLAYER_H
#include <QMediaPlayer>
#include <QAbstractVideoSurface>

class MyMediaPlayer: public QMediaPlayer
{
Q_OBJECT
public:
    Q_PROPERTY(QAbstractVideoSurface* videoSurface READ getVideoSurface WRITE setVideoSurface )
    Q_PROPERTY(QString fileName READ fileName WRITE setFileName)
    Q_INVOKABLE void play();
public:
    MyMediaPlayer(QObject * parent = 0, Flags flags = 0);

    QString fileName() const;
    void setFileName(const QString &);

public slots:

    void setVideoSurface(QAbstractVideoSurface* surface);
    QAbstractVideoSurface* getVideoSurface();
    void OnMetaDataAvailableChanged(bool available);

private:
    QAbstractVideoSurface* m_surface;
    QString m_filName;
};
#endif // MYMEDIAPLAYER_H

mymediaplayer.cpp

#include "mymediaplayer.h"

void MyMediaPlayer::play()
{
    qDebug()<<"play...";
    QMediaPlayer::setMedia(QUrl::fromLocalFile(m_filName));
    QMediaPlayer::play();
    QString strTitle = QMediaPlayer::metaData("Title").toString();
    QString strSize= QMediaPlayer::metaData("Size").toString();
    qDebug()<<"title: " + strTitle + "size: "+ strSize;
}

MyMediaPlayer::MyMediaPlayer(QObject* parent, Flags flags): QMediaPlayer(parent, flags)
{
    connect(this, SIGNAL(metaDataAvailableChanged(bool)), this, SLOT(OnMetaDataAvailableChanged(bool)));
}

void MyMediaPlayer::setVideoSurface(QAbstractVideoSurface* surface)
{
    qDebug() << "Changing surface";
    m_surface = surface;
    setVideoOutput(m_surface);
}

QAbstractVideoSurface* MyMediaPlayer::getVideoSurface()
{
    return m_surface;
}

void MyMediaPlayer::OnMetaDataAvailableChanged(bool available)
{
    // 数据显示
    qDebug() << "OnMetaDataAvailableChanged";
    if(available){
        foreach(QString str,availableMetaData()){
            qDebug()<<str<<"   :"<<metaData(str).toString().toUtf8().data();
        }
        //playlist->setCurrentIndex(++count);
    }
}

QString MyMediaPlayer::fileName() const
{
    return m_filName;
}

void MyMediaPlayer::setFileName(const QString &fileName)
{
    m_filName = fileName;
}

我们的main.cpp可以写为：

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "mymediaplayer.h"

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

    MyMediaPlayer* player = new MyMediaPlayer();
    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("mymediaplayer", player);
    engine.load(QUrl(QLatin1String("qrc:/main.qml")));

    return app.exec();
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtMultimedia 5.8
 import QtQuick.Dialogs 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Video Player")

    FileDialog {
         id: fileDialog
         title: "Please choose a file"
         folder: shortcuts.home
         onAccepted: {
             console.log("You chose: " + fileDialog.fileUrls)
             var path = "" + fileDialog.fileUrl
             var fileName = path.replace("file://", "")
             console.log("fileName: " + fileName)
             mymediaplayer.fileName = fileName
             mymediaplayer.play()
         }
         onRejected: {
             console.log("Canceled")
         }
         Component.onCompleted: visible = true
     }

    VideoOutput {
        id: videooutput
        anchors.fill: parent
        source: mymediaplayer
    }
}

我们可以播放我们的视频文件：

https://github.com/liu-xiao-guo/mediaplayer