微信小程序video自定义播放与暂停按钮

微信小程序video自定义播放与暂停按钮,第1张

官网: https://developers.weixin.qq.com/miniprogram/dev/component/video.html

相关API:wx.createVideoContext(string id, Object this)

controls:是否显示默认播放控件(播放/暂停按钮、播放进度、时间)

muted:是否静音

show-play-btn:是否显示视频底部控氏隐制栏的播放按钮

show-center-play-btn:是否显示视频中间的播放按钮祥枝

show-mute-btn:是否显示静音按钮

事歼宴厅件:

bindended:当播放到末尾时触发 ended 事件

接口:

wx.createVideoContext(string id, Object this)

https://gitee.com/susuhhhhhh/wxmini_demo

虽然界面很简单,但是一个音频播放器该有的功能大部分都有了(没有歌词显示功能).

主要实现的功能有:

1.实现音频播放,暂停

2.实现拖拽进度条,快进音频进度

3.实现上一首,下一首,列表循环播放

4.实现关闭小程序,也可在后台播放,正式版需要通过审核,开发版本可正常测试

一丶index.js

数据初始化

playMusic 切换播放歌曲的方法.

countTimeDown 循环计时,进度展示

sliderChange slider的洞盯启拖拽事件

lastMusic 上一首

playOrpause 中间则中的按钮,播放/暂停切换

nextMusic 下一首

listClick 列表点击纳如事件

界面切换,时长格式化

二丶index.wxml

三丶index.wxss

四丶要实现关闭小程序后,依然后台播放,微信顶部悬浮展示,需要再app.json配置requiredBackgroundModes属性


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/yw/12322954.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-22
下一篇2023-05-22

发表评论

登录后才能评论

评论列表(0条)

    保存