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


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 相关文章推荐
js点击事件链接的问题解决
Apr 25 Javascript
Node.js文件操作详解
Aug 16 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 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 GD绘制24小时柱状图
2008/06/28 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
关于this和self的使用说明
2010/08/01 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
python二分查找算法的递归实现方法
2016/05/12 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
家长给孩子的评语
2014/01/30 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
会议欢迎词
2015/01/23 职场文书
个人思想政治总结
2015/03/05 职场文书
化妆品促销活动总结
2015/05/07 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server