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

}