前言

一直听闻QML无比强大好用,工作中需要扣一个同时播放视频的Demo,所以就趁这个机会研究了一下。

效果图和源码





源码仓库

主要设计

主页面QML

import QtQuick 2.12
import QtQuick.Window 2.12 Window {
visible: true
width: 640
height: 480 Counter{
id : counter
} Player {
id:player1
visible: true
anchors.left:parent.left
anchors.top:parent.top
width: parent.width
height: parent.height
} Player {
id:player2
visible: true
x:parent.x
y:parent.height-height
width: parent.width/3
height: parent.height/3
counter:counter
canchangez : true
} Player {
id:player3
visible: true
x:player2.width
y:parent.height-height
width: parent.width/3
height: parent.height/3
counter:counter
canchangez : true
} Player {
id:player4
visible: true
x:player2.width+player3.width
y:parent.height-height
width: parent.width/3
height: parent.height/3
counter:counter
canchangez : true
}
}

程序窗口共有4个播放器,最下层有1个,剩下3个作为子控件放在其上方。

播放器QML

import QtQuick 2.12
import QtMultimedia 5.12
import QtQuick.Controls 2.12
import QtQuick.Dialogs 1.2 //播放器
Rectangle {
color: "black"
property Counter counter
property bool canchangez : false function setTop() {
z = counter.getNext()
//console.log("change z to ", z)
}
function setBot(){
//z = 0
} //背景图
Image{
id: bkimg
source: "qrc:/bk.png"
anchors.fill: parent
} TextInput {
id: uri
width: parent.width - btn.width
height: 25
font.pixelSize: 15
topPadding: 5
//text: "file:../RandB/media/gx.wmv"
text: qsTr("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov")
color: "blue"
clip: true
//onEditingFinished: {
// mediaplayer.play()
//}
}
Button {
id: btn
width: 100
anchors.right: parent.right
height: uri.height
text: qsTr("file") highlighted: true
onClicked: {
fileDialog.open()
}
}
FileDialog {
id: fileDialog
title: qsTr("Please choose a media file")
nameFilters: [ "Media Files (*.mp4 *.flv *.avi *.wmv *.mkv)", "*.*"]
onAccepted: {
uri.text = String(fileUrl)
}
} //需要安装LAVFilter
//低版本QT(5.12)也可能会出现debug版本运行出错
MediaPlayer {
id: mediaplayer
loops: MediaPlayer.Infinite
}
VideoOutput {
id: videooutput
anchors.left: parent.left
anchors.bottom: parent.bottom
width: parent.width
height: parent.height - uri.height
source: mediaplayer
autoOrientation: true
} MouseArea{
anchors.fill: videooutput
onClicked: {
bkimg.visible = false
mediaplayer.source = uri.text
mediaplayer.play()
}
onDoubleClicked: {
mediaplayer.stop()
bkimg.visible = true
} property real lastX: 0
property real lastY: 0
onPressed: {
lastX = mouseX
lastY = mouseY
if(canchangez){
setTop()
}
}
onReleased: {
if(canchangez){
setBot()
}
} onPositionChanged: {
if (pressed) {
parent.x += mouseX - lastX
parent.y += mouseY - lastY
}
}
}
}

使用QML提供的MediaPlayer和VideoOutput组合,播放视频。MouseArea中添加onPressed、onReleased和onPositionChanged等事件处理器处理鼠标的操作进行播放、暂停和移动。

计数器QML

import QtQuick 2.0

//计数器
Item {
property int number : 0
function getNext(){
return ++number
}
}

主要用于处理播放器控件Z轴坐标的累增(一句C艹代码都不想写,所以才这么设计一个计数器控件)。

后记

Windows平台下运行,需要安装LAVFilter,不然会出现某些媒体格式不能播放。Android平台能编译apk,但是播放会报出很多openGL相关的错误,最终未能解决。之前还以为真的能,一份代码,windows和android都能完美运行。

Player控件可以进一步优化,在其他项目中使用。

QML真的挺好用的!

完全依赖QML实现播放器的更多相关文章

  1. qml 音乐播放器的进度条

    进度条采用qml的Slider组件 样式什么的,网上很多.我就不列举了.接下来主要说明,进度条是怎样按秒移动的. Slider { id: control    value: 0 stepSize: ...

  2. qml操作播放器

    现在增加了一个filter属性,所以可以很好和opencv结合.转一篇文章(http://blog.qt.io/blog/2015/03/20/introducing-video-filters-in ...

  3. JavaScript自定义媒体播放器

    使用<audio>和<video>元素的play()和pause()方法,可以手工控制媒体文件的播放.组合使用属性.事件和这两个方法,很容易创建一个自定义的媒体播放器,如下面的 ...

  4. iOS 多个播放器同时播放,双击全屏,单击退出全屏

    前言:公司需求如下:点击一个按钮播放一个视频,最多同时播放4个:双击某视频让其全屏,单击再恢复原来的样子.IOS的播放器有两种,MPMoviePlayerController,AVAudioPlaye ...

  5. SE Springer小组《Spring音乐播放器》软件需求说明3

    3 需求规定 3.1对功能的规定 基本功能与相关的输入输出如下表所示.歌曲播放.停止.暂停等功能调用MCI库,数据在MCI库下如何运作与用户的直观感受无关,就不具体列出. 输入 处理 输出 用户登录信 ...

  6. SE Springer小组之《Spring音乐播放器》可行性研究报告三、四

    3 对现有系统的分析 由于本次可行性分析主要是建立在团队自行实现一个音乐软件的目标上,并不是在一个现有系统的基础上开发改进的新系统.因此这里将分析一款市面上已经存在的音乐软件(以下称为W音乐),并为之 ...

  7. HTML5的Audio标签打造WEB音频播放器

    目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...

  8. 使用vlc进行二次开发做自己的播放器

    可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 web网页中使用vlc插件播放相机rtsp流视频 使用 https://github.com/ZeBobo5/Vlc.Do ...

  9. 使用vlc播放器做rtsp流媒体服务器

    可参考: 使用vlc播放器播放rtsp视频 web网页中使用vlc插件播放相机rtsp流视频 使用vlc进行二次开发做自己的播放器 首先需要安装vlc播放器,下载及安装步骤略 使用vlc播放器做rts ...

随机推荐

  1. VirtualBox虚拟机安装

    目录 安装前准备 1.开始安装,安装很简单,直接上图 2.设置全局路径,这里主要是方便以后创建虚拟机的时候不用每次都去选择存放位置,默认是存放到C盘 安装前准备 系统:Windows 10 专业版 软 ...

  2. tap点击一次,内部程序执行两次,多次

    调试过程发现,使用 $(document).on('tap', '.children2', function () { //内部程序 }) 点击children2的时候,程序在里面执行了两次.百度得到 ...

  3. python编程练习题目

    github上面的一个项目,分为level1,level2,level3 三个等级的难度. 题目地址 一部分中文翻译 python教程 剑指offer,python3实现 python进阶 练习题1: ...

  4. linux openjdk安装

    sudo apt-get install openjdk-8-jdk 默认提示是 sudo apt-get install openjdk-8-jre, 这个只有jre https://openjdk ...

  5. bootstrap实现多选项及回显

    1.前端 <link rel="stylesheet" href="${ctxStatic}/js/bootstrap-select-1.12.2/dist/css ...

  6. JAVA的堆栈和内存、垃圾回收解说

    1.有关java健壮性特点的真相 很多书上都说java健壮性的特点是因为java使用数组代替了c++的指针:c++最令人头痛的问题就是内存问题,java的健壮性使编程人员不用再考虑内存的问题:这种观点 ...

  7. c中结构体边界对齐

    原则1.普通数据成员对齐规则:第一个数据成员放在offset为0的地方,以后每个数据成员存储的起始位置要从该成员大小的整数倍开始(比如int在32位机为4字节,则要从4的整数倍地址开始存储). 原则2 ...

  8. SWUST OJ NBA Finals(0649)

    NBA Finals(0649) Time limit(ms): 1000 Memory limit(kb): 65535 Submission: 404 Accepted: 128   Descri ...

  9. 吴裕雄--天生自然 python语言数据分析:开普勒系外行星搜索结果分析

    import pandas as pd pd.DataFrame({'Yes': [50, 21], 'No': [131, 2]}) pd.DataFrame({'Bob': ['I liked i ...

  10. 红灯区:DevOps 建设的思考和实践

    点击关注"有赞coder" 获取更多技术干货哦- 作者:费解 团队:效能改进 背景 众所周知,在丰田精益生产中,核心观念包含对人的尊重.消除浪费.持续改善,只有这样,企业才能保持良 ...