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


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 MD4
Dec 20 Javascript
Javascript this关键字使用分析
Oct 21 Javascript
JavaScript脚本性能优化注意事项
Nov 18 Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
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 实现判断用户是否手机访问
2015/01/21 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
简单学习Python多进程Multiprocessing
2017/08/29 Python
python绘制简单彩虹图
2018/11/19 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
实现Python与STM32通信方式
2019/12/18 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
树莓派升级python的具体步骤
2020/07/05 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
双方协议书
2014/04/22 职场文书
幼师求职自荐信
2014/05/31 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
2014年销售部工作总结
2014/12/01 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
安全生产培训心得体会
2016/01/18 职场文书