原生的video组件功能已经可以满足用户所有需求，本文介绍一下非正常的用户需求怎么解决。
比如：用户需要限制播放时不能滑动屏幕快进、不能拖动进度条快进快退，不准倍速播放，不准全屏；用户第一次完整看完视频后可以倍速，快进，暂停和全屏。
解决的思路：隐藏掉video自带的所有控件功能，包括原生的video功能全部设置为false，然后自己画一个底部控件包含播放按钮还有进度条和全屏按钮，在全屏页面左上角添加返回退出全屏按钮。
上面是效果图；
下面看一下页面中的写法：
<video wx:if="{{videofalse}}" id="myvideo" custom-cache="{{false}}" bindpause="bindPause" bindplay="bindPlay" bindtimeupdate="bindtimeupdate" bindended="bindended" bindfullscreenchange="bindfullscreenchange" initial-time="{{strtime}}" enable-progress-gesture="{{progress}}" show-progress="{{progress}}" controls="{{progress}}" objectFit="cover" src="{{VideoUrl}}">
<view class='mast_video' wx:if="{{mast_video}}">
<button bindtap='seed_change'>倍速</button>
</view>
<view class='change_mast' wx:if="{{change_mast}}" bindtap='close_change'>
<view class='seed_change'>
<button bindtap="bindButtonRate" data-rate='1.0'>1.0X</button>
<button bindtap="bindButtonRate" data-rate='1.25'>1.25X</button>
<button bindtap="bindButtonRate" data-rate='1.5'>1.5X</button>
</view>
</view>
<view class='process-container' wx:if="{{stuflag == true}}">
<image src='{{playStates ? "/images/main/puse_v.png" : "/images/main/play_v.png"}}' class='video-controls-icon' bindtap='videoOpreation'></image>
<view class='slider-container'>
<slider bindchange="sliderChange" bindchanging="sliderChanging" step="0.5" value="{{sliderValue}}" backgroundColor="#A8A8A8" activeColor="#FFFFFF" block-color="#FFFFFF" block-size="14" /><text decode="{{true}}" space="{{true}}">{{canvasTime}}</text>
</view>
<image src='{{playAlls ? "/images/main/play_all.png" : "/images/main/puse_all.png"}}' class='video-controls-icon' bindtap='videoAllscreen'></image>
</view>
<view class='video_back'><image src='{{playAlls ? " " : "/images/main/video_back.png"}}' bindtap='video_back'></image></view>
</video>
有人会说为什么不使用cover-view来实现呢？cover-view是挺方便的，但是它不能实现完全的自我控制，有些属性被微信官方定义死了，还不如使用最基础的view组件和image组件自由呢。
在video组件中将自己需要控制的属性全部使用**{{false}}或者自定义名字来控制**。对自己画出的倍速和控制条的内容使用wx:if来判断可控制还是不可控制
播放按钮和全屏按钮使用三元运算来判断是播放按钮还是暂停按钮，是全屏按钮还是退出全屏按钮。
默认条件为真（true）
playStates: true, //控制播放 & 暂停按钮的显示
playAlls: true,
在点击函数中进行判断：
videoOpreation() { //自定义暂停
this.data.playStates ? this.videoContext.pause() : this.videoContext.play();
this.setData({
playStates: !this.data.playStates
})
},
videoAllscreen(e) { //自定义全屏
this.data.playAlls ? this.videoContext.requestFullScreen() : this.videoContext.exitFullScreen();
this.setData({
playAlls: !this.data.playAlls
})
},
video_back: function (e) {
this.data.playAlls ? this.videoContext.requestFullScreen() : this.videoContext.exitFullScreen();
this.setData({
playAlls: !this.data.playAlls
})
},
sliderChanging(e) { //拖拽过程中，不允许更新进度条
var new_stuflag = wx.getStorageSync("key_stuflag");
if (new_stuflag == 1) { //学完允许拖动
this.setData({
updateState: false
})
} else {
}
},
sliderChange(e) {
var new_stuflag = wx.getStorageSync("key_stuflag");
if (new_stuflag == 1) { //学完允许拖动
if (this.data.duration && obj == 200) { //完成拖动后，计算对应时间并跳转到指定位置
this.videoContext.seek(e.detail.value / 100 * this.data.duration);
this.setData({
sliderValue: e.detail.value,
updateState: true //完成拖动后允许更新滚动条
})
} else { }
} else { }
},
通过自定义函数来控制自定义组件的内容。然后在第一遍播放完成度额时候给后台提交播放信息和时长，根据返回结果来开放video组件的相应属性功能。
bindended: function (res) { //第一遍结束
var that = this,
obj_time = wx.getStorageSync("v_time"), //本次学习时长
userNid = wx.getStorageSync("unionid"),
vid = wx.getStorageSync("bo_vid"),
bid = wx.getStorageSync("ke_id");
wx.request({
url: app.globalData.Url + "/api/users/event/addstudent/", //进度提交
data: {
unionid: userNid,
vid: vid + 1,
bid: bid,
stime: obj_time
},
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success: function (res) {
wx.setStorageSync("key_stuflag", res.data.stuflag)
if (res.data.stuflag == 0) { //根据学习进度状态改变是否可快进
that.setData({
progress: false,
mast_video: false,
stuflag: true
})
} else {
that.setData({
progress: true,
stuflag: false,
mast_video: true,
})
}
}
})
},
bindButtonRate(e) { //倍速
var that = this;
let rate = e.currentTarget.dataset.rate
this.videoContext.playbackRate(Number(rate))
setTimeout(function () {
that.setData({
change_mast: false,
mast_video: true,
})
}, 400)
},
seed_change: function (s) { //按钮展开倍速
this.setData({
mast_video: false,
change_mast: true,
})
},
close_change: function () { //空白处关闭倍速
this.setData({
mast_video: true,
change_mast: false,
})
},
这样自定义video功能就准备齐全了。
如果有不懂的可以评论区回复，会在不定时进行一一答复。