小程序视频或音频自定义可拖拽进度条的示例代码


Posted in Javascript onSeptember 30, 2018

小程序原生组件的音频播放时并没有进度条的显示,而此次项目中,鉴于原生的视频进度条样式太丑,产品要求做一个可拖拽的进度条满足需求。
视频和音频提供的api大致是相似的,可以根据以下代码修改为与音频相关的进度条。

wxml的结构如下:

<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" enable-danmu danmu-btn controls="{{false}}" autoplay='{{true}}' bindtimeupdate="videoUpdate" objectFit="fill"></video>
<view class='process-container'>
  <image src='{{playStates ? "../../assets/image/pause_icon.png" : "../../assets/image/play_icon.png"}}' class='video-controls-icon' bindtap='videoOpreation'></image>
   <view class='slider-container'>
   <slider bindchange="sliderChange" bindchanging="sliderChanging" step="1" value="{{sliderValue}}" backgroundColor="#A8A8A8" activeColor="#FFEE83" block-color="#FFEE83"  />
  </view> 
</view>

data中初始化了sliderValue, updateState, playStates几个变量。

data: {
  sliderValue: 0, //控制进度条slider的值,
  updateState: false, //防止视频播放过程中导致的拖拽失效
  playStates: true //控制播放 & 暂停按钮的显示
 },

 onReady: function () {
  this.videoContext = wx.createVideoContext('myVideo');
  this.setData({
   updateState: true
  })
 },

videoUpdate在播放进度变化时触发,触发频率 250ms 一次。event.detail = {currentTime, duration},currentTime表示当前时间,duration表示总时长,都以秒为单位。

videoUpdate(e) {
  if (this.data.updateState) { //判断拖拽完成后才触发更新,避免拖拽失效
   let sliderValue = e.detail.currentTime / e.detail.duration * 100;
   this.setData({
    sliderValue,
    duration: e.detail.duration
   })
  }
 },

进度条可拖拽并指定视频跳转到相应的位置

sliderChanging(e) {
  this.setData({
   updateState: false //拖拽过程中,不允许更新进度条
  })
 },
 sliderChange(e) {
  if (this.data.duration) {
   this.videoContext.seek(e.detail.value / 100 * this.data.duration); //完成拖动后,计算对应时间并跳转到指定位置
   this.setData({
    sliderValue: e.detail.value,
    updateState: true //完成拖动后允许更新滚动条
   })
  }
 },

暂停/播放视频

videoOpreation() {
  this.data.playStates ? this.videoContext.pause() : this.videoContext.play();
  this.setData({
   playStates: !this.data.playStates
  })
 },

总结:slider的最大值为100, step的值最小为1,这会导致视频或音频播放时间过长的时候,slider滑块移动速度很慢,拖拽移动的时间间隔较大,用户体验差。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中this关键字使用方法详解
Mar 08 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
JavaScript File分段上传
Mar 10 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
Vue内容分发slot(全面解析)
Aug 19 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 #Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 #Javascript
详解如何webpack使用DllPlugin
Sep 30 #Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 #Javascript
vue-router 手势滑动触发返回功能
Sep 30 #Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 #Javascript
JS数组实现分类统计实例代码
Sep 30 #Javascript
You might like
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
JQuery切换显示的效果实例代码
2013/02/27 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
写给保洁员表扬信
2014/01/08 职场文书
校园安全检查制度
2014/02/03 职场文书
竞选村长演讲稿
2014/04/28 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
员工开除通知书
2015/04/25 职场文书
退货证明模板
2015/06/23 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
python process模块的使用简介
2021/05/14 Python