使用qml 实现简单的播放器(1)

使用qml 简单实现一个播放器。

引用需要的模块

qtquick 模块和multimedia 模块

import QtQuick 2.0
import QtMultimedia 5.0

下面创建一个黑色的矩形区域用于显示视频，代码如下:

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

    MouseArea {
        anchors.fill: parent
        onClicked: {
            // do something
        }
    }

}

代码比较简单，创建一个Rectangle，设置宽，高，颜色和鼠标处理区域已经点击操作。

使用多媒体模块，实现基本的播放功能。

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

    MouseArea {
        anchors.fill: parent
        onClicked: {
            startPlay(); //鼠标点击，播放视频。调用的是js封装的api
        }
    }

    MediaPlayer {  // Qt multimedia 模块，通过source 属性设置需要播放的视频文件
        id: mediaPlayer
        source: "videos/feng.mp4"
    }

    VideoOutput {  // Qt Multimedia 模块，通过source 设置需要使用的mediaplayer。（MediaPlayer 提供视频和音频的播放）
        anchors.fill: parent
        source: mediaPlayer
    }

    function startPlay() {  // 封装js函数，调用mediaPlayer 开始播放。
        mediaPlayer.play();
    }

}

上面的代码通过点击rectangle 播放视频文件。