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


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 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
vue+springboot实现项目的CORS跨域请求
Sep 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超级全局变量数组小结
2012/10/04 PHP
PHP循环结构实例讲解
2014/02/10 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
js的写法基础分析
2011/01/17 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
react-router实现按需加载
2017/05/09 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
Vue精简版风格概述
2018/01/30 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
vue-video-player 断点续播的实现
2021/02/01 Vue.js
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
小学教师事迹材料
2014/01/13 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
师范生小学见习总结
2015/06/23 职场文书
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript