小程序拥有着自己封装的一套控件,和html控件大致相似但是也有很多不同之处. 直接进入正题 小程序的video标签认宽度300px、高度225px,设置宽高需要通过wxss设置width和height。 但是各种机型不同的屏幕就需要进行适配,小程序也提供了一个方法用来获取手机的信息的方法,其中也包含了宽和高 videoWidth 和videoHeight 就是根据比例适配出来的宽和高 直接使用代码就OK //获取屏幕宽高 wx.getSystemInfo({ success: function (res) { var windowWidth = res.windowWidth; //video标签认宽度300px、高度225px,设置宽高需要通过wxss设置width和height。 var videoHeight = (225 / 300) * windowWidth//屏幕高宽比 console.log('videoWidth: ' + windowWidth) console.log('videoHeight: ' + videoHeight) _this.setData({ videoWidth: windowWidth, videoHeight: videoHeight }) } }) 本次开发的小程序设计到视频,其中有个需求就是不允许拖动进度条 .但是小程序video并没有提供一个属性用来禁止进度条拖动.其实解决的方法也很简单.说说大致思路.video提供了一个方法bindtimeupdate 可以时时检测视频的进度 .另外也提供了一套API,其中就有对视频的控制 通过它可以控制视频的播放,暂停 ,跳转进度 .在没有拖动的情况下 通过bindtimeupdate检测到的视频进度应该是1秒(更低)的1秒的更新进度,但是在拖动的情况下我们就能检测到拖动后的进度和拖动之前的相差很多,这个地方就需要设置一个范围了.我是设置的前一个进度和后一个进度相差在3秒以上的那么就利用seek 这个方法跳转到前面的保存好的进度.这里并没有直接禁止进度条不能拖动,但是利用跳转进度也很巧妙的解决了这个问题.直接上代码. //获取上一次的时间 var lastTime = wx.getStorageSync('lastTime'); //转化为整数 现在的时间 var time = parseInt(nowTime); //保存现在的时间 wx.setStorageSync(that.data.model.CourseID.toString()+ app.userInfo.UserCode, time); //相差3秒 if ((parseInt(nowTime) - parseInt(lastTime)) > 3) { //跳转到上次的进度 that.videoContext.seek(parseInt(lastTime)); console.log('上次的时间' + lastTime + '现在的时间' + nowTime) } |
小程序开发之视频开发 适配、禁止拖动进度
发布:2018-04-21 09:49浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08