如何在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_OBJECTpublic:    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.7import QtQuick.Controls 2.0import QtQuick.Layouts 1.0import QtMultimedia 5.8 import QtQuick.Dialogs 1.0ApplicationWindow {    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