小程序擁有著自己封裝的一套控件,和html控件大致相似但是也有很多不同之處.
直接進(jìn)入正題
小程序的video標(biāo)簽認(rèn)寬度300px惑艇、高度225px，設(shè)置寬高需要通過(guò)wxss設(shè)置width和height痢毒。
但是各種機(jī)型不同的屏幕就需要進(jìn)行適配,小程序也提供了一個(gè)方法用來(lái)獲取手機(jī)的信息的方法,其中也包含了寬和高 ?videoWidth 和videoHeight 就是根據(jù)比例適配出來(lái)的寬和高 直接使用代碼就OK ??
//獲取屏幕寬高
wx.getSystemInfo({
success: function (res) {
var windowWidth = res.windowWidth;
//video標(biāo)簽認(rèn)寬度300px、高度225px，設(shè)置寬高需要通過(guò)wxss設(shè)置width和height九孩。
var videoHeight = (225 / 300) * windowWidth//屏幕高寬比
console.log('videoWidth: ' + windowWidth)
console.log('videoHeight: ' + videoHeight)
_this.setData({
videoWidth: windowWidth,
videoHeight: videoHeight
})
}
})
本次開(kāi)發(fā)的小程序設(shè)計(jì)到視頻,其中有個(gè)需求就是不允許拖動(dòng)進(jìn)度條? .但是小程序video并沒(méi)有提供一個(gè)屬性用來(lái)禁止進(jìn)度條拖動(dòng).其實(shí)解決的方法也很簡(jiǎn)單.說(shuō)說(shuō)大致思路.video提供了一個(gè)方法bindtimeupdate ?可以時(shí)時(shí)檢測(cè)視頻的進(jìn)度 .另外也提供了一套API,其中就有對(duì)視頻的控制
通過(guò)它可以控制視頻的播放,暫停 ,跳轉(zhuǎn)進(jìn)度? .在沒(méi)有拖動(dòng)的情況下? 通過(guò)bindtimeupdate檢測(cè)到的視頻進(jìn)度應(yīng)該是1秒(更低)的1秒的更新進(jìn)度,但是在拖動(dòng)的情況下我們就能檢測(cè)到拖動(dòng)后的進(jìn)度和拖動(dòng)之前的相差很多,這個(gè)地方就需要設(shè)置一個(gè)范圍了.我是設(shè)置的前一個(gè)進(jìn)度和后一個(gè)進(jìn)度相差在3秒以上的那么就利用seek 這個(gè)方法跳轉(zhuǎn)到前面的保存好的進(jìn)度.這里并沒(méi)有直接禁止進(jìn)度條不能拖動(dòng),但是利用跳轉(zhuǎn)進(jìn)度也很巧妙的解決了這個(gè)問(wèn)題.直接上代碼.
//獲取上一次的時(shí)間
var lastTime = wx.getStorageSync('lastTime');
//轉(zhuǎn)化為整數(shù) 現(xiàn)在的時(shí)間
var time = parseInt(nowTime);
//保存現(xiàn)在的時(shí)間
wx.setStorageSync(that.data.model.CourseID.toString()+ app.userInfo.UserCode, time);
//相差3秒
if ((parseInt(nowTime) - parseInt(lastTime)) > 3) {
//跳轉(zhuǎn)到上次的進(jìn)度
that.videoContext.seek(parseInt(lastTime));
console.log('上次的時(shí)間' + lastTime + '現(xiàn)在的時(shí)間' + nowTime)
}
有問(wèn)題+qq648731281 ? ?歡迎騷擾 ?相互交流學(xué)習(xí)
