前言

一直听闻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. [学习笔记]set的使用

    set默认进行升序排列,通过结构体可以改. 维护一个比主人公分数高的set 降序排列,比主人公高就进入set 比主人公低就不进去,或者在删除操作里删掉. 然后血的教训 https://blog.csd ...

  2. idea常用快捷键(对于新手不建议切换使用eclipse)

    查看方法实现:ctrl+alt+鼠标实现父类方法:ctrl+i查看方法的具体实现:ctrl+alt(鼠标再点击方法)快速导包:alt+enter格式化:Ctrl+Alt+L格式化当前行:ctrl+sh ...

  3. 关于guava实现线程池

    private ListeningExecutorService executorService = MoreExecutors.listeningDecorator(Executors.newCac ...

  4. C/C++预处理指令#include,#define,#undef,#if,#ifdef,#ifndef,#elif,#endif,#error......

    本文主要记录了C/C++预处理指令,常见的预处理指令如下: #空指令,无任何效果 #include包含一个源代码文件 #define定义宏 #undef取消已定义的宏 #if如果给定条件为真,则编译下 ...

  5. mysql之结果集去重

    mysql操作中,经常会遇到对结果集的去重 本篇文章列出几种应对办法: 1.使用distinct做去重,测试了一下,DISTINCT可以支持多列去重 select DISTINCT user_id_t ...

  6. Datagridview 实现二维表头和行合并

    借鉴别人的,改了改,没用timer using System;using System.Collections.Generic;using System.ComponentModel;using Sy ...

  7. 关于Apache Commons-IO的使用

    commons-io是一款处理io流的工具,封装了很多处理io流和文件的方法,可以大大简化我们处理io流和操作文件的代码.从common-io的官方使用文档可以看出,它主要分为工具类.尾端类.行迭代器 ...

  8. 关于MyBatis的运行原理(转载)

    1.获取sqlSessionFactory对象: 解析文件的每一个信息保存在Configuration中,返回包含Configuration的DefaultSqlSessionFactory: 注意: ...

  9. 手撸GBDT原理(未完成)

    一直对GBDT里面的具体计算逻辑不太清楚,在网上发现了一篇好博客. 先上总结的关系图 GBDT对类别变量是怎么处理的? 这些东西都是在网上发现的,讲的挺好的. GBDT原理与Sklearn源码分析-回 ...

  10. MOOC(7)- case依赖、读取json配置文件进行多个接口请求-模拟接口响应数据(18)

    这里是把传入的请求数据作为响应值返回 # -*- coding: utf-8 -*- # @Time : 2020/2/15 9:47 # @File : do_mock_18.py # @Autho ...