小程序擁有著自己封裝的一套控件,和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)

}