青岛网站空间,有实力的网站建设公司,wordpress+瀑布流加载,网站开发时间进度由于开发需要#xff0c;作者封装了一个音视频播放进度条的组件#xff0c;支持 vue2 及 vue3 #xff0c;有需要的朋友后台私信作者获取组件源码哦#xff08;工作日每天都在线#xff09;#xff0c;下面是对该款组件的介绍。
组件默认样式#x1f447;#xff08;组…由于开发需要作者封装了一个音视频播放进度条的组件支持 vue2 及 vue3 有需要的朋友后台私信作者获取组件源码哦工作日每天都在线下面是对该款组件的介绍。
组件默认样式组件提供了多个配置选项可根据自身需求进行个性化配置详情请往下看 效果演示只展示部分更多效果请往下看 目录 一、介绍1、用法概述2、模式 二、使用1、基础配置1.1、模式必传1.2、是否播放1.3、播放开始的时间必传1.4、播放倍速1.5、禁用进度条1.6、是否显示最左侧当前播放时间文本1.7、是否显示播放暂停及启动按钮1.8、是否显示倍速选择器1.9、是否显示进度条提示 2、样式配置2.1、组件的宽高设置2.2、进度条中端点样式配置2.3、进度条背景色2.4、开始暂停按钮2.5、进度条提示框出现位置2.6、组件背景色 3、特殊配置3.1、连续播放模式3.1.1、播放总时长必传非连续播放模式下请勿传递 3.2、非连续播放模式3.2.1、播放数据必传3.2.2、进度条的开始及结束时间必传3.2.3、跨度时间3.2.4、进度条中的标识样式3.2.5、是否显示刻度3.2.6、刻度间隔时间3.2.7、时间格式左侧提示时间、刻度时间、进度条提示时间 4、传出的进度条数据4.1、进度条当前播放进度的时间4.2、拖动进度条时触发的回调4.3、拖动进度条后触发的回调 5、配置参数总结基础配置样式配置特殊配置连续播放模式非连续播放模式 组件传出数据 6、用法示例 三、总结 一、介绍
该款组件可作为音频、视频播放的进度条用于控制音频、视频的播放播放进度、暂停开始、播放倍速、自定义刻度 等。同时组件提供了多方面的配置选项使用者可以通过个性化配置来达到自己想要的效果下面会对配置项进行详解拓展性极高。
1、用法概述
在播放的过程中组件会返回当前播放的播放信息如当前播放到的秒进度、进度条被拖拽时的回调、进度条拖拽后的回调等根据这些返回信息我们拿到后根据实际的需求来做不同处理就可以实现控制播放的效果。
2、模式
组件分为两种模式 连续播放模式 及 非连续播放模式
❓ 连续和非连续分别表示什么意思呢 ❓
连续与非连续指的是播放是否是连续的。比如我们平时常见的音频、视频的播放是以秒作为单位逐秒进行播放的这就是连续播放。而非连续播放出现的情况可能比较少指的是根据传入组件的数据有数据的时间节点则进行播放如果下一个数据的时间节点与当前数据时间节点间隔超过指定秒则直接跳到下一个有数据的时间节点若间隔不超过指定秒数则逐秒播放至下一数据时间节点这样跳着播放的就是非连续播放。有不懂的可联系作者
二、使用
接下来对组件的 配置项 以及 能够获取到的进度条信息 进行详细说明
1、基础配置
1.1、模式必传
参数类型默认值描述typeStringcontinuous上面介绍中说到组件分为连续播放和非连续播放两种模式 连续播放continuous非连续播放discontinuous
连续播放演示 非连续播放演示 1.2、是否播放
关于播放倍速有以下两个参数
参数类型默认值描述isActivateBooleantrue通过该参数可以控制播放的开始与暂停初始值赋值为 true 则默认播放
演示以连续播放为例非连续播放效果相同 1.3、播放开始的时间必传
参数类型默认值描述scheduleStartTimeNumber0连续播放模式下传入播放开始的秒数非连续播放模式传入播放开始的毫秒时间戳
//连续播放模式
const scheduleStartTime 10 //表示从第10秒开始播放//非连续播放模式
const scheduleStartTime 1679988534000 //1679988534000是一个毫秒时间戳表示从1679988534000这个时间点开始播放1.4、播放倍速
关于播放倍速有以下两个参数
参数类型默认值描述multipleListArray[64,32,16,8,4,2,1]提供的倍速选项默认提供默认值中的播放倍速选项multipleNumber1当前的播放倍速默认为1倍速
演示以连续播放为例非连续播放效果相同
1.5、禁用进度条
参数类型默认值描述disabledBooleanfalsetrue 禁用false 启用
演示以连续播放为例非连续播放效果相同
1.6、是否显示最左侧当前播放时间文本
参数类型默认值描述showTimeTextBooleantruetrue 显示false 隐藏
演示以连续播放为例非连续播放效果相同 1.7、是否显示播放暂停及启动按钮
参数类型默认值描述showPlayBtnBooleantruetrue 显示false 隐藏
演示以连续播放为例非连续播放效果相同 1.8、是否显示倍速选择器
参数类型默认值描述showMultipleBooleantruetrue 显示false 隐藏
演示以连续播放为例非连续播放效果相同 1.9、是否显示进度条提示
参数类型默认值描述showTooltipBooleantruetrue 显示false 隐藏
演示以连续播放为例非连续播放效果相同
2、样式配置
2.1、组件的宽高设置
需要设置了宽度组件才会显示组件的宽度100%自适应包裹它的元素通过修改其父元素的宽高来设置其宽度组件自带高度不需要设置其高度代码如下 div stylewidth:100%;ProgressBar :typetype:dataListdataList:startTimestampstartTimestamp:endTimestampendTimestamp...afterInputafterInput afterChangeafterChangegetCurrentProgressgetCurrentProgress/ProgressBar/div2.2、进度条中端点样式配置 参数类型默认值描述schedulePointConfigObject{width: ‘20px’,height: ‘20px’ }设置端点的样式
可配置的属性有
属性类型描述例子widthString宽度15pxheightString高度15pxborderColorString边框颜色redborderWidthString边框宽度2pxborderRadiusString边框弧度10%bgColorString背景色redbgImgUrlString背景图片https://…png
演示以连续播放为例非连续播放效果相同 实现上方效果schedulePointConfig 的配置为可供参考
import testImg from ./assets/images/test_img.pngconst schedulePointConfig {width: 30px,height: 30px,bgImgUrl: testImg,borderColor: transparent,bgColor:transparent,borderRadius: 0px
}2.3、进度条背景色
参数类型默认值描述progressBarColorString#409eff设置进度条背景色
演示以连续播放为例非连续播放效果相同 2.4、开始暂停按钮
开始暂停按钮可替换替换图片和设置大小其它样式未提供配置如有其他需求可隐藏自带按钮根据自身需求个性化实现组件提供控制播放开始及暂停的配置参数。
参数类型默认值描述activateImgUrlString–开始按钮stopImgUrlString–暂停按钮startStopBtnConfigObject{width: ‘15px’,height: ‘15px’,}样式配置只提供宽高的配置
注意 这里的图片并不像上文进度条端点可以使用本地图片只能使用线上地址图片。
演示以连续播放为例非连续播放效果相同 2.5、进度条提示框出现位置
参数类型默认值描述placementStringtopvue2版本不能使用 可选值有‘top’ / ‘top-start’ / ‘top-end’ / ‘bottom’ / ‘bottom-start’ / ‘bottom-end’ / ‘left’ / ‘left-start’ / ‘left-end’
演示以连续播放为例非连续播放效果相同 2.6、组件背景色
参数类型默认值描述scheduleBgColorStringtransparent设置组件背景色
演示以连续播放为例非连续播放效果相同 3、特殊配置
特殊配置指的是区分模式的一些配置。
3.1、连续播放模式
3.1.1、播放总时长必传非连续播放模式下请勿传递
参数类型默认值描述maxNumber0单位秒连续播放模式下播放的总时长
3.2、非连续播放模式
3.2.1、播放数据必传
参数类型默认值描述dataListArray[]非连续播放的播放数据 传入数据时间必须从小到大进行排序
数据格式为
let dataList [{loc:{time: 1679981334000},alarm:{text:我是标识1,style:{color: red}}},{loc:{time: 1679988534000},},{loc:{time: 1679992134000},alarm:{text:我是标识2,style:{color: red}}},{loc:{time: 1679995734000},},{loc:{time: 1679998434000},},
]结构说明 dataList 中的每一个元素表示一个有数据的时间节点在播放的过程中会对这些点进行播放两点间的时间间隔如果超过指定的跨度时间跨度时间配置说明在下方 3.2.3 则直接跳到下一个节点进行播放如果不超过跨度时间则逐秒播放到下一个时间节点。loc 中的 time 属性就是该数据所处时间而 alarm 表示该事件节点是否需要进行标注存在 alarm 属性的节点会在进度条中进行标注。alarm 中的 text 表示标注的文本通过 style 中的属性可以配置 text 文本的样式。
演示该演示所使用数据就是上方的数据格式中的数据 3.2.2、进度条的开始及结束时间必传
参数类型描述startTimestampNumber毫秒时间戳如:1679980393000进度条开始时间endTimestampNumber毫秒时间戳如:1679998698000进度条结束时间
演示:
3.2.3、跨度时间
参数类型默认值描述spanTimeNumber30单位秒两个节点如果间隔时间超过该跨度时间则直接跳转到下一节点如果不大于该跨度时间则逐秒播放到下一个时间节点
3.2.4、进度条中的标识样式
参数类型默认值描述marksConfigObject{color: ‘#e8405e’, width: ‘3px’}width宽度Stringcolor颜色String
演示:
3.2.5、是否显示刻度
参数类型默认值描述showScaleBooleanfalsetrue显示false隐藏
演示
3.2.6、刻度间隔时间
参数类型默认值描述scaleIntervalTimeNumber30单位分钟当刻度时间格式scaleTextFormat属性设置为 m:s 格式时单位自动变为秒刻度的间隔时间
3.2.7、时间格式左侧提示时间、刻度时间、进度条提示时间 参数类型默认值描述timeTipFormatStringh:m设置左侧时间的格式scaleTextFormatStringh:m设置刻度时间的格式tooltipFormatStringh:m设置进度条提示时间的格式
能够设置的时间格式有Y年M月D日h时m分s秒
h:m | Y-M-D h:m:s | M-D h:m:s | M-D h:m | Y-M-D |
Y/M/D h:m:s | M/D h:m:s | M/D h:m | Y/M/D | h:m:s | m:s特殊注意 当 scaleTextFormat 设置为 m:s 时scaleIntervalTime刻度间隔时间属性的单位就会变为秒
4、传出的进度条数据
组件中传出的数据及钩子函数通过传出的数据可以对外部的音视频播放进行控制。通过传出的钩子函数可以在相应的时机做自身需要的处理。
4.1、进度条当前播放进度的时间
函数参数描述getCurrentProgressnowTime当前的进度时间连续播放模式下返回进度的秒非连续播放模式下返回进度的毫秒时间戳函数用户获取当前的播放进度
演示
连续播放模式 非连续播放模式
4.2、拖动进度条时触发的回调
函数参数描述afterInputvalueNumber类型当前拖动到的进度拖拽时触发
4.3、拖动进度条后触发的回调
函数参数描述afterChangevalueNumber类型当前拖动到的进度拖拽后或者点击进度条某个点时触发
5、配置参数总结
基础配置
参数类型默认值描述是否必传typeStringcontinuous上面介绍中说到组件分为连续播放和非连续播放两种模式连续播放continuous非连续播放discontinuous 是isActivateBooleantrue通过该参数可以控制播放的开始与暂停初始值赋值为 true 则默认播放否scheduleStartTimeNumber0连续播放模式下传入播放开始的秒数非连续播放模式传入播放开始的毫秒时间戳是multipleListArray[64,32,16,8,4,2,1]提供的倍速选项默认提供默认值中的播放倍速选项否multipleNumber1当前的播放倍速默认为1倍速否disabledBooleanfalsetrue 禁用false 启用否showTimeTextBooleantruetrue 显示false 隐藏否showPlayBtnBooleantruetrue 显示false 隐藏否showMultipleBooleantruetrue 显示false 隐藏否showTooltipBooleantruetrue 显示false 隐藏否
样式配置
参数类型默认值描述是否必传schedulePointConfigObject{width: ‘20px’,height: ‘20px’ }设置端点的样式否progressBarColorString#409eff设置进度条背景色否activateImgUrlString–开始按钮否stopImgUrlString–暂停按钮否startStopBtnConfigObject{width: ‘15px’,height: ‘15px’,}设置开始暂停按钮样式否placementStringtop设置进度条提示的出现位置否scheduleBgColorStringtransparent设置组件背景色否
特殊配置
连续播放模式
参数类型默认值描述是否必传maxNumber0单位秒连续播放模式下播放的总时长非连续播放模式下请勿传递是
非连续播放模式
参数类型默认值描述是否必传dataListArray[]非连续播放的播放数据 传入数据时间必须从小到大进行排序是startTimestampNumber毫秒时间戳如:1679980393000–进度条开始时间是endTimestampNumber毫秒时间戳如:1679998698000–进度条结束时间是spanTimeNumber30单位秒跨度时间否marksConfigObject{color: ‘#e8405e’, width: ‘3px’}设置进度条中标注样式否showScaleBooleanfalse是否显示刻度否scaleIntervalTimeNumber30单位分钟当刻度时间格式scaleTextFormat属性设置为 m:s 格式时单位自动变为秒刻度的间隔时间否timeTipFormatStringh:m设置左侧时间的格式否scaleTextFormatStringh:m设置刻度时间的格式否tooltipFormatStringh:m设置进度条提示时间的格式否
组件传出数据
函数参数描述getCurrentProgressnowTime当前的进度时间连续播放模式下返回进度的秒非连续播放模式下返回进度的毫秒时间戳函数用户获取当前的播放进度afterInputvalueNumber类型当前拖动到的进度拖拽时触发afterChangevalueNumber类型当前拖动到的进度拖拽后或者点击进度条某个点时触发
6、用法示例
ProgressBar :typediscontinuous:isActivateisActivate getCurrentProgressgetCurrentProgress...
/ProgressBar三、总结
组件包含了日常常见的进度条需求基本能满足大部分进度条的使用环境。感兴趣的朋友可以后台私信作者获取组件工作日每天都在线。如有其他功能组件中未实现的欢迎留言作者会持续更新感谢
觉得有帮助的朋友可以支持下作者哦您的鼓励是我创作的最大动力如有开发问题可联系作者
