038-第三代软件开发-简易视频播放器-自定义Slider (二)

这篇具有很好参考价值的文章主要介绍了038-第三代软件开发-简易视频播放器-自定义Slider (二)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

038-第三代软件开发-简易视频播放器-自定义Slider (二),# 一个真实的QML&C++项目,Qt,Qml,Slider,进度条,视频播放器

第三代软件开发-简易视频播放器-自定义Slider (二)


关键字: QtQml关键字3关键字4关键字5

项目介绍

欢迎来到我们的 QML & C++ 项目!这个项目结合了 QML(Qt Meta-Object Language)和 C++ 的强大功能,旨在开发出色的用户界面和高性能的后端逻辑。

在项目中,我们利用 QML 的声明式语法和可视化设计能力创建出现代化的用户界面。通过直观的编码和可重用的组件,我们能够迅速开发出丰富多样的界面效果和动画效果。同时,我们利用 QML 强大的集成能力,轻松将 C++ 的底层逻辑和数据模型集成到前端界面中。

在后端方面,我们使用 C++ 编写高性能的算法、数据处理和计算逻辑。C++ 是一种强大的编程语言,能够提供卓越的性能和可扩展性。我们的团队致力于优化代码,减少资源消耗,以确保我们的项目在各种平台和设备上都能够高效运行。

无论您是对 QML 和 C++ 开发感兴趣,还是需要我们为您构建复杂的用户界面和后端逻辑,我们都随时准备为您提供支持。请随时联系我们,让我们一同打造现代化、高性能的 QML & C++ 项目!

重要说明☝

☀该专栏在第三代软开发更新完将涨价

简易视频播放器

其实咱们在前面屏保哪里已经搞过视频文件播放了,只是哪里没有进度条,也没有时间线,也不能控制播放暂停,今天我们就是把这些再加上去。如下图所示,这里因为原始录制的Gif 太大,无法上传,所以做了减帧处理,看着有点卡顿了。

038-第三代软件开发-简易视频播放器-自定义Slider (二),# 一个真实的QML&C++项目,Qt,Qml,Slider,进度条,视频播放器

这里咱就是直接上代码吧;

import QtQuick 2.15
import QtMultimedia 5.15
import QtQuick.Layouts 1.15                     // 布局需要
import QtQuick.Controls 2.15
Rectangle
{
    property string videoSource: "file"
    property bool fullScreen: false
    id:root
    color: "#000000"
    anchors.centerIn: parent
    width: 720
    height: 480
    visible: false
    SoundEffect {
        id: playSound
        source: "qrc:/Audio/T_Resource/T_Audio/T_Base/buttonTach.wav"
    }
    //    Video
    //    {
    //        id:video_show
    //        anchors.fill: parent
    //        loops: MediaPlayer.Infinite
    //        source: root.videoSource
    //    }



    MediaPlayer
    {
        id:media_video
        source: videoSource                 // 绝对路径
        loops: MediaPlayer.Infinite
        volume: 0.5
    }
    VideoOutput
    {
        id:out_put
        anchors.fill: parent
        source: media_video
    }


    RowLayout
    {
        id:layout_menu
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 26
        spacing: 20
        Item
        {
            width: 26
            height: 20
            Image {
                anchors.centerIn: parent
                height: 26
                fillMode: Image.PreserveAspectFit
                source: (media_video.playbackState === MediaPlayer.PlayingState ) ? "qrc:/Video/T_Resource/T_Image/Vidoe/zt.png" : "qrc:/Video/T_Resource/T_Image/Vidoe/bf.png"
            }
            MouseArea
            {
                anchors.fill: parent
                onClicked: (media_video.playbackState === MediaPlayer.PlayingState ) ? media_video.pause() : media_video.play();
            }

        }

        Item {
            implicitWidth: 50
            Text {
                anchors.centerIn: parent
                font.pixelSize: 20
                color: "#FFFFFF"
                text: {
                    // 创建变量获取时间当前播放位置,单位毫秒
                    var milliseconds = media_video.position
                    // 创建变量,将当前播放位置的毫秒转换为分钟,并向下取舍
                    var minutes = Math.floor(milliseconds / 60000)
                    // 获取不足 60秒的毫秒数
                    milliseconds -= minutes * 60000
                    // 创建变量,不足60秒的毫秒数转换为秒
                    var seconds = milliseconds / 1000
                    // 进行四舍五入
                    seconds = Math.round(seconds)
                    // 判断秒数是否小于10秒,来输出时间格式,最终格式为:mm:ss
                    if(seconds < 10)
                        return minutes + ":0" + seconds
                    else
                        return minutes + ":" + seconds
                }
            }
        }

        Slider
        {
            id:durationTimeSlider
            Layout.fillWidth: true
            value: media_video.position / media_video.duration
            background: Rectangle{
                x: durationTimeSlider.leftPadding
                y: durationTimeSlider.topPadding + durationTimeSlider.availableHeight / 2 - height / 2
                implicitHeight: 4
                implicitWidth: 200
                width: durationTimeSlider.availableWidth
                height: implicitHeight
                radius: 2
                color: "#F0F0F0"    // 进度条背景颜色
                // 视频已经播放的区域
                Rectangle{
                    width: durationTimeSlider.visualPosition * parent.width
                    height: parent.height
                    color: "#36ABDF"    // 进度条已经走完的颜色
                    radius: 2
                }
            }
            // 滑块样式
            handle: Rectangle{
                antialiasing: true
                x: durationTimeSlider.leftPadding + durationTimeSlider.visualPosition
                   * (durationTimeSlider.availableWidth - width)
                y: durationTimeSlider.topPadding + durationTimeSlider.availableHeight / 2 - height / 2
                implicitWidth: 20
                implicitHeight: 20
                radius: 10
                border.color: "#bdbebf"    // 滑块边框颜色
                // 判断滑块按压状态,设置不同的颜色
                color: durationTimeSlider.pressed ? "#B0C4DE" : "#F0F0F0"
                // 滑块中心的区域,我这里设置了透明
                Rectangle{
                    width: 4
                    height: 4
                    radius: 2
                    color: "transparent"
                    anchors.centerIn: parent
                }
            }

            property real index: 0
            property bool changed: false
            // 滑块移动时,将 index 设置为滑块当前位置
            onMoved: {
                if(pressed){
                    index = position
                }
            }

            onPressedChanged: {
                if(pressed === true){
                    changed = true
                }else if (changed === true){
                    media_video.seek(index * media_video.duration)
                    changed = false
                }
            }
        }
        Item {
            implicitWidth: 50
            Text {
                anchors.centerIn: parent
                font.pixelSize: 20
                color: "#FFFFFF"
                text: {
                    var millseconds = media_video.duration.valueOf()
                    var minutes = Math.floor(millseconds / 60000)
                    millseconds -= minutes * 6000
                    var secounds = millseconds / 1000
                    secounds = Math.round(secounds)
                    // 返回 mm : ss 格式时间
                    if(secounds < 10)
                        return minutes + ":0" + secounds
                    else
                        return minutes + ":" + secounds
                }
            }
        }
        Item
        {
            id:item_volume
            width: 26
            height: 20
            Image {
                anchors.centerIn: parent
                height: 26
                fillMode: Image.PreserveAspectFit
                source: "qrc:/Video/T_Resource/T_Image/Vidoe/yl_z.png"
            }
            MouseArea
            {
                anchors.fill: parent
                onClicked: item_volum.visible = !item_volum.visible
            }

        }

        Item
        {
            width: 26
            height: 20
            Image {
                anchors.centerIn: parent
                height: 26
                fillMode: Image.PreserveAspectFit
                source: fullScreen ? "qrc:/Video/T_Resource/T_Image/Vidoe/sx.png" :"qrc:/Video/T_Resource/T_Image/Vidoe/qp.png"
            }
            MouseArea
            {
                anchors.fill: parent
                onClicked: root.fullScreen = !root.fullScreen
            }

        }
    }
    Item {
        id:item_volum
        width: 42
        height: 235
        visible: false
        anchors.bottom: layout_menu.top
        anchors.right: layout_menu.right
        anchors.rightMargin: 36
        Text {
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 20
            color: "#36ABDF"
            text: (volumeSlider.value * 100).toFixed(0)
        }
        Slider
        {
            id:volumeSlider
            width: 42
            height: 220
            from:0.0
            to:1.0
            stepSize: 0.01
            value: media_video.volume
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            orientation:Qt.Vertical
            background: Rectangle{
                anchors.horizontalCenter: parent.horizontalCenter
                y: volumeSlider.topPadding + volumeSlider.availableHeight / 2 - height / 2
                implicitHeight: 200
                implicitWidth: 4
                width: 4
                height: volumeSlider.availableHeight
                radius: 2
                color: "#F0F0F0"    // 进度条背景颜色
                // 视频已经播放的区域
                Rectangle{
                    anchors.bottom: parent.bottom
                    width: parent.width
                    height: parent.height - volumeSlider.visualPosition * parent.height
                    color: "#36ABDF"    // 进度条已经走完的颜色
                    radius: 2
                }
            }
            // 滑块样式
            handle: Rectangle{
                antialiasing: true
                anchors.horizontalCenter: parent.horizontalCenter
                y: volumeSlider.topPadding + volumeSlider.visualPosition
                   * (volumeSlider.availableHeight - height)

                implicitWidth: 20
                implicitHeight: 20
                radius: 10
                border.color: "#bdbebf"    // 滑块边框颜色
                // 判断滑块按压状态,设置不同的颜色
                color: volumeSlider.pressed ? "#B0C4DE" : "#F0F0F0"
                // 滑块中心的区域,我这里设置了透明
                Rectangle{
                    width: 4
                    height: 4
                    radius: 2
                    color: "transparent"
                    anchors.centerIn: parent
                }
            }
            onValueChanged: media_video.volume = value

        }

    }


    function play()
    {
        media_video.play();
    }
    function stop(){
        if((media_video.playbackState === MediaPlayer.PlayingState  || media_video.playbackState === MediaPlayer.PausedState))
            media_video.stop();
    }
}

自定义Slider (二)

横向

        Slider
        {
            id:durationTimeSlider
            Layout.fillWidth: true
            value: media_video.position / media_video.duration
            background: Rectangle{
                x: durationTimeSlider.leftPadding
                y: durationTimeSlider.topPadding + durationTimeSlider.availableHeight / 2 - height / 2
                implicitHeight: 4
                implicitWidth: 200
                width: durationTimeSlider.availableWidth
                height: implicitHeight
                radius: 2
                color: "#F0F0F0"    // 进度条背景颜色
                // 视频已经播放的区域
                Rectangle{
                    width: durationTimeSlider.visualPosition * parent.width
                    height: parent.height
                    color: "#36ABDF"    // 进度条已经走完的颜色
                    radius: 2
                }
            }
            // 滑块样式
            handle: Rectangle{
                antialiasing: true
                x: durationTimeSlider.leftPadding + durationTimeSlider.visualPosition
                   * (durationTimeSlider.availableWidth - width)
                y: durationTimeSlider.topPadding + durationTimeSlider.availableHeight / 2 - height / 2
                implicitWidth: 20
                implicitHeight: 20
                radius: 10
                border.color: "#bdbebf"    // 滑块边框颜色
                // 判断滑块按压状态,设置不同的颜色
                color: durationTimeSlider.pressed ? "#B0C4DE" : "#F0F0F0"
                // 滑块中心的区域,我这里设置了透明
                Rectangle{
                    width: 4
                    height: 4
                    radius: 2
                    color: "transparent"
                    anchors.centerIn: parent
                }
            }

            property real index: 0
            property bool changed: false
            // 滑块移动时,将 index 设置为滑块当前位置
            onMoved: {
                if(pressed){
                    index = position
                }
            }

            onPressedChanged: {
                if(pressed === true){
                    changed = true
                }else if (changed === true){
                    media_video.seek(index * media_video.duration)
                    changed = false
                }
            }
        }

纵向

        Slider
        {
            id:volumeSlider
            width: 42
            height: 220
            from:0.0
            to:1.0
            stepSize: 0.01
            value: media_video.volume
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            orientation:Qt.Vertical
            background: Rectangle{
                anchors.horizontalCenter: parent.horizontalCenter
                y: volumeSlider.topPadding + volumeSlider.availableHeight / 2 - height / 2
                implicitHeight: 200
                implicitWidth: 4
                width: 4
                height: volumeSlider.availableHeight
                radius: 2
                color: "#F0F0F0"    // 进度条背景颜色
                // 视频已经播放的区域
                Rectangle{
                    anchors.bottom: parent.bottom
                    width: parent.width
                    height: parent.height - volumeSlider.visualPosition * parent.height
                    color: "#36ABDF"    // 进度条已经走完的颜色
                    radius: 2
                }
            }
            // 滑块样式
            handle: Rectangle{
                antialiasing: true
                anchors.horizontalCenter: parent.horizontalCenter
                y: volumeSlider.topPadding + volumeSlider.visualPosition
                   * (volumeSlider.availableHeight - height)

                implicitWidth: 20
                implicitHeight: 20
                radius: 10
                border.color: "#bdbebf"    // 滑块边框颜色
                // 判断滑块按压状态,设置不同的颜色
                color: volumeSlider.pressed ? "#B0C4DE" : "#F0F0F0"
                // 滑块中心的区域,我这里设置了透明
                Rectangle{
                    width: 4
                    height: 4
                    radius: 2
                    color: "transparent"
                    anchors.centerIn: parent
                }
            }
            onValueChanged: media_video.volume = value

        }

这部分qml 代码很好懂,没有啥需要注意的吧,这里需要注意的就是一部分

    MediaPlayer
    {
        id:media_video
        source: videoSource                 // 绝对路径
        loops: MediaPlayer.Infinite
        volume: 0.5
    }
    VideoOutput
    {
        id:out_put
        anchors.fill: parent
        source: media_video
    }

其实我最开始是用了Video组件的,但是再全屏的时候遇到问题,就是画面不会跟着全屏,应该是哪里跟着改下就可,不过我没有时间处理,这个功能就是播放一下宣教视频和宣传视频,所以目前不会有太多的精力放在这里。文章来源地址https://www.toymoban.com/news/detail-730028.html


038-第三代软件开发-简易视频播放器-自定义Slider (二),# 一个真实的QML&amp;C++项目,Qt,Qml,Slider,进度条,视频播放器

到了这里,关于038-第三代软件开发-简易视频播放器-自定义Slider (二)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 045_第三代软件开发-U盘监测

    : Qt 、 Qml 、 USB 、 Disk 、 文件 欢迎来到我们的 QML C++ 项目!这个项目结合了 QML(Qt Meta-Object Language)和 C++ 的强大功能,旨在开发出色的用户界面和高性能的后端逻辑。 在项目中,我们利用 QML 的声明式语法和可视化设计能力创建出现代化的用户界面。通过直观的编

    2024年02月05日
    浏览(34)
  • 【Harmony OS】【ArkUI】ets开发 简易视频播放器

    前言:这一次我们来使用ets 的Swiper 组件、List 组件和Video 组件制作一个简易的视频播放器。本篇是以HarmonyOS 官网的codelab 简易视频播放器(eTS )为基础进行编写。本篇最主要的内容就是一个主界面包括顶部的视频海报轮播,中部的视频播放列表,以及点击海报和播放列表进

    2023年04月27日
    浏览(40)
  • 易语言软件定制软件开发脚本开发协议软件电脑网站APP应用视频制作工程制作

    随着信息技术的不断发展,易语言软件定制开发已成为许多公司的一项重要业务。本文将探讨如何利用易语言承接软件定制软件开发脚本开发协议软件电脑网站APP应用视频制作工程制作。 一、易语言概述 易语言是一种简单易学的编程语言,它采用中文编程,让不会英文的初

    2024年02月08日
    浏览(81)
  • 开发一款短剧视频小程序软件多少钱?

    今年最炙手可热的互联网项目之一当属短剧小程序,常常受到客户的咨询,他们想了解开发一套短剧小程序需要多少费用。今天,我将详细介绍相关费用及开发细节。 小程序认证费用: 每年300元,是确保小程序正常运营所必需的认证费用。 域名费用: 域名是短剧小程序在

    2024年02月20日
    浏览(45)
  • 【音视频SDK测评】线上K歌软件开发技术选型

    在线K歌软件的开发有许多技术难点,需考虑到音频录制和处理、实时音频传输和同步、音频压缩和解压缩、设备兼容性问题等技术难点外,此外,开发者还应关注音乐版权问题,确保开发的应用合规合法。 前面写了几期关于 直播 SDK 技术选型 的文章,主要是从RTC实时音视频

    2024年02月14日
    浏览(45)
  • 音视频开发:Qt在视频剪辑3D桌面软件获胜, 嵌入式不敌安卓

    1 Qt Android嵌入式应用层开发方向对比   大家都知道啊,做嵌入式linux设备,一些没有屏幕,比如安防摄像头,门铃之类的,另外一些嵌入式设备是有触控屏,在触控屏上还跑应用软件的,这种比如商场各种自动售卖机,铁路卖票,银行自助服务,车载系统等。 10年前,我大学

    2024年02月09日
    浏览(46)
  • C#制作简易视频播放器

    1.打开vs2019新建一个窗体项目,选用框架.net framework4.7.2 2.在【工具箱】里随便选中一个控件,右键单击它 看到图片中的【选择项】了嘛,单击它,打开添加组件的一个窗体 在添加组件窗体中的【COM组件】中找到【Window Media Player】组件并勾选,然后【确定】 3.可以看到我们的

    2024年02月12日
    浏览(56)
  • Qt 实现简易的视频播放器,功能选择视频,播放,暂停,前进,后退,进度条拖拉,视频时长显示

    1.效果图 2.代码实现 2.1 .pro文件 2.2 .h文件 2.3 .cpp文件

    2024年04月12日
    浏览(44)
  • 测试C#调用Aplayer播放视频(3:编写简易播放器)

      学习了参考文献1中的示例代码,也找出了前一篇文章中自己测试控件但无法播放视频的问题(没有将解码库文件复制到可执行程序所在的codecs文件夹内),本文基于APlayer组件编写简单的视频播放器,主要实现以下功能: 序号 功能 说明 1 自定义logo 调用SetCustomLogo函数设

    2024年02月05日
    浏览(66)
  • 7×24无人值守直播推流软件开发实战,一文为你揭开视频推流的底层原理(附源码)

    你有看到过那种不间断型的、循环播放视频音乐的直播间吗?或者那种直播播放电影的直播间?还有层出不穷的文章,类似如下标题: “如何搭建一个24小时不间断的直播间?躺入xxxx元!” “24小时电影直播间,每天到账xxx~xxxx,不出镜副业,人人可做!” “50块的云服务器

    2024年02月08日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包