小程序开发video组件自定义功能

原生的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功能就准备齐全了。
根据评论区需求，加上本页面CSS样式：

.weui-cells {
  margin-top: 80rpx;
  text-align: left;
}

.weui-label {
  width: 5em;
}

.coursedes-item {
  border-bottom: 1rpx solid #e5e5e5;
  padding: 40rpx 10rpx;
  font-size: 26rpx;
  color: #141414;
  line-height: 39rpx;
  text-indent: 52rpx;
  text-align: justify;
}

.conact {
  width: 100%;
  height: 105rpx;
  padding: 12.5rpx 0 12.5rpx 10rpx;
  background: #ccc;
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  min-height: 105rpx;
}

.search-left {
  flex: 6;
  background: #fff;
  text-align: left;
}

.search-left input {
  display: inline-block;
  height: 85rpx;
  font-size: 26rpx;
  width: 100%;
}

.search-placeholder {
  color: #333;
  line-height: 85rpx;
  font-size: 26rpx;
  margin-left: 20px;
}

.sCode image {
  width: 44rpx;
  height: 44rpx;
  padding: 10rpx 10rpx;
}

.conact .search-left image {
  width: 40rpx;
  height: 40rpx;
  padding: 10rpx;
  float: right;
}

.conact .search-right {
  flex: 1;
}

.conact .search-right image {
  width: 64rpx;
  height: 64rpx;
}

.kefuBtn {
  background-color: rgba(255, 255, 255, 0);
  border: 0px;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kefuBtn::after {
  border: 0px;
}

.fenxBtn {
  background-color: rgba(255, 255, 255, 0);
  border: 0px;
  left: 0;
  flex: 1;
}

.fenxBtn::after {
  border: 0px;
}

.fenxBtn image {
  width: 44rpx;
  height: 44rpx;
  padding: 14rpx 5rpx;
}

.pof {
  position: fixed;
}

video {
  width: 100%;
  height: 430rpx;
}

.video_top {
  width: 100%;
  height: 430rpx;
}

.page-body-button {
  margin-bottom: 30rpx;
  font-size: 30rpx;
  line-height: 90rpx;
}

.top_img {
  width: 100%;
  height: 430rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index:19;
  background:#333;
}

.top_img .cover_img {
  width: 90rpx;
  height: 90rpx;
  z-index:5;
}

video .content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 75rpx;
  font-size: 32rpx;
  color: #fff;
}

video .content cover-image {
  width: 44rpx;
  height: 44rpx;
}

.page-cont {
  height: 100%;
}

.belly-scroll {
  width: 100%;
  height: auto;
  background-color: #f5f5f5;
  overflow: hidden;
}

.hook {
  width: 100%;
  height: auto;
}

.header-info {
  padding: 0 30rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}

.header-info .title {
  font-size: 36rpx;
  color: #333;
  line-height: 1.2;
  padding-top: 30rpx;
  margin-bottom: 10rpx;
}

.header-info .desc {
  font-size: 28rpx;
  color: #555;
}

.header-info .video-total {
  margin-top: 30rpx;
  padding-bottom: 20rpx;
}

.header-info .user-cont {
  font-size: 24rpx;
  color: #808080;
}

.header-info .user-cont label {
  font-size: 28rpx;
  color: #1a1a1a;
}

.header-info .user-tool {
  height: 46rpx;
}

.header-info .play-audio {
  color: #c21327;
  font-size: 22rpx;
  padding: 0 10rpx;
  height: 38rpx;
  border: 1rpx solid #c21327;
  margin-right: 55rpx;
}

.header-info .play-audio image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.header-info .recomment {
  width: 42rpx;
  height: 42rpx;
  margin-top: 2rpx;
  margin-right: 40rpx;
}

.header-info .recomment image {
  width: 40rpx;
  height: 40rpx;
}

.header-info .share {
  width: 42rpx;
  height: 42rpx;
  margin-top: 2rpx;
  margin-right: 5rpx;
}

.header-info .share image {
  width: 40rpx;
  height: 40rpx;
}

.header-info .share-tips {
  white-space: nowrap;
  padding: 0 15rpx;
  height: 38rpx;
  line-height: 38rpx;
  position: fixed;
  right: 6%;
  margin-top: 8px;
  font-size: 22rpx;
  color: #c21327;
  border-radius: 19rpx;
  border: 1px solid #c21327;
  background-color: #fbebed;
}

.header-info .share-tips:before {
  content: '';
  position: absolute;
  right: -1px;
  top: -7rpx;
  width: 16rpx;
  height: 30rpx;
  background-color: #fbebed;
  transform: skewY(-36deg);
  border-top: 1.5px solid #c21327;
  border-right: 1px solid #c21327;
}

.header-info .share-tips:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fbebed;
  width: 20rpx;
  height: 5rpx;
}

.column-inner {
  background-color: #fff;
}

.column-box {
  width: 100%;
  height: 88rpx;
  background-color: #fff;
}

.column-box .column-content {
  width: 100%;
  height: 88rpx;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}

.column-box .column-pof {
  position: absolute;
  top: 430rpx;
  left: 0;
  z-index: 100;
}

.column-box .column-item {
  flex: 1;
  text-align: center;
  padding-top: 15rpx;
  line-height: 68rpx;
  font-size: 28rpx;
  color: #666;
}

.column-box .column-item.active {
  color: #c21327;
  position: relative;
}

.column-box .column-item.active:before {
  content: '';
  width: 50rpx;
  height: 4rpx;
  background-color: #c21327;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -25rpx;
}

.footer {
  width: 100%;
  height: 102rpx;
  border-bottom: 1rpx solid #e6e6e6;
  left: 0;
  background-color: #fff;
}

.go-home {
  width: 100rpx;
  flex-wrap: wrap;
  font-size: 0;
  line-height: 1.2;
}

.go-home image {
  width: 38rpx;
  height: 38rpx;
  position: relative;
  top: 8rpx;
}

.go-home label {
  width: 100%;
  text-align: center;
  font-size: 24rpx;
  color: #999;
}

.pay-box {
  flex: 1;
  width: 650rpx;
  padding-right: 26rpx;
  padding-left: 26rpx;
}

.pay-box button {
  width: 300rpx;
  height: 80rpx;
  border: 1px solid #c21327;
  text-align: center;
  line-height: 78rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #4c4c4c;
}

.pay-box button label {
  color: #c21327;
}

.pay-box .vip-btn {
  color: #fff;
  background: #c21327;
}

.evaluate-inner {
  padding: 0 30rpx 30rpx;
  background-color: #fff;
}

.evaluate-item {
  padding: 20rpx 0 20rpx;
  font-size: 26rpx;
  color: #141414;
  line-height: 32rpx;
}

.user-info {
  margin-bottom: 30rpx;
}

.user-box {
  height: 80rpx;
  color: #333;
}

.user-box image {
  width: 80rpx;
  height: 80rpx;
  will-change: transform;
  margin-right: 20rpx;
  border-radius: 100%;
}

.recommend-cont {
  color: #676767;
  font-size: 20rpx;
}

.recommend-cont image {
  width: 23rpx;
  height: 23rpx;
  margin-left: 4rpx;
}

.recommend-cont text {
  margin-left: 12rpx;
  line-height: 1.8;
  padding-top: 5rpx;
}

.eavluate {
  line-height: 1.5;
  border-bottom: 1px solid #eee;
}

.course-list {
  padding: 0 20rpx;
  background-color: #fff;
  color: #1a1a1a;
}

.course-list .title {
  padding-top: 50rpx;
  font-size: 34rpx;
  margin-bottom: 10rpx;
}

.course-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.course-item .course-before {
  font-size: 28rpx;
  width: 520rpx;
}

.course-item .name {
  margin-bottom: 5rpx;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.course-item.active .name {
  color: #c21327;
}

.course-item .info {
  font-size: 24rpx;
  color: #666;
}

.course-item.active .palyer {
  width: 24rpx;
  height: 24rpx;
  margin-left: 8rpx;
}

.experience-icon {
  font-size: 22rpx;
  color: #fff;
  padding: 5rpx 8rpx;
  background-color: #b6985b;
  border-radius: 10rpx;
  vertical-align: initial;
  margin-left: 8rpx;
}

.course-after {
  width: 130rpx;
  height: 55rpx;
  border: 1px solid #c21327;
  color: #c21327;
  border-radius: 26rpx;
  text-align: center;
  background-color: #ffeef0;
}

.course-after image {
  width: 22rpx;
  height: 22rpx;
  margin-right: 6rpx;
}

.course-after.playered {
  background-color: #fff;
}

.evaluate-btn {
  padding: 20rpx 60rpx 50rpx;
}

.evaluate-btn .evaluate-btn-item {
  width: 250rpx;
  height: 80rpx;
  line-height: 78rpx;
  border: 1px solid #ccc;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin: 0 auto;
}

.isPayShow {
  display: block;
}

.isPayHide {
  display: none;
}
.mast_video{
  display:block;
  width:60rpx;
  height:60rpx;
  right:10rpx;
  position:absolute;
  margin-top:165rpx;
  text-align:center;
  border-radius:50%;
  z-index:11;
  background-color: rgba(0,0,0,0.5);
}
.mast_video button{
  font-size:28rpx;
  line-height:60rpx;
  color:#fff;
}
.change_mast{
  width:100%;
  height:430rpx;
  position:relative;
  z-index:13;
  background-color: rgba(0,0,0,0.5);
}
.seed_change{
  width:40%;
  height:60rpx;
  display:flex;
  text-align:center;
  position:absolute;
  top:165rpx;
  left:30%;
  z-index:13;
}
.seed_change button{
  flex:1;
  color:#fff;
}
.process-container{
  width:100%;
  padding:1% 2% 1% 2%;
  height:60rpx;
  max-height:60rpx;
  position:absolute;
  bottom:4px;
  left:0;
  right:0;
  z-index:13;
  display:flex;
  align-items: center;
  background:rgba(59, 57, 57, 0.2);
}
.process-container image{
  display:inline-block;
  flex:1;
  max-width:60rpx;
  max-height:60rpx;
  text-align:center;
}
.slider-container{
  z-index:13;
  height:60rpx;
  margin-bottom:10rpx;
  flex:6;
}
.video_btn{
  flex:1;
}
.video_btn image{
  width:80rpx;
  height:80rpx;
}
.video_time{
  flex:1;
}
.shares{
  width:80rpx;
  height:80rpx;
  position:fixed;
  right:10rpx;
  bottom:160rpx;
  display:flex;
  flex-direction: column;
  align-items: center;
  background-color:#05b5eb;
  color:white;
  border-radius:50%;
  z-index:1;
}
.shares text{
  text-align:center;
  font-size:24rpx;
  color:#fff;
  line-height:36rpx;
}
.video_back{
  display:block;
  width:60rpx;
  height:60rpx;
  left:5rpx;
  top:15rpx;
  position:absolute;
  text-align:center;
  z-index:19;
}
.video_back image{
  width:44rpx;
  height:44rpx;
}

如果有不懂的可以评论区回复，会在不定时进行一一答复。