小程序拥有着自己封装的一套控件,和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)

}