微信小程序-设置倍数播放按钮-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序-设置倍数播放按钮。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目前微信小程序的Video并没有自带的倍数播放设置，但是官方提供了设置播放倍数的方法：VideoContext.playbackRate(number rate) | 微信开放文档 (qq.com)

用cover-view标签在video上设置按钮。

上代码（仅提供设计思路）：

HTML部分：

    <video 
      class="video-playback"
      id="myVideo" 
      src="{{videoLink}}" 
      binderror="videoErrorCallback" 
      danmu-list="{{danmuList}}" 
      enable-danmu 
      vslide-gesture
      show-center-play-btn='{{false}}' 
      show-play-btn="{{true}}" 
      controls
      title="{{titleName}}"
      referrer-policy='origin'
      initial-time="{{initial_time}}"
      bindpause="suspendPlay"
      bindplay="startPlay"
      bindended="endPlay"
      bindtimeupdate="updatePlay"
      bindfullscreenchange="screenChange"
      bindcontrolstoggle="bindcontrolstoggle"
    >
    <cover-view class="video-multiple-play" wx:if="{{!showMultiple}}" style="{{isFullScreen && showButtonMultiple?'':'display:none'}}" catchtap="clickMultiple">
      <!-- <button plain="true" class="video-multiple-play-btn">{{selectMultiple}}X</button> -->
      {{selectMultiple}}X
    </cover-view>
    <cover-view class="multiple-play-message" wx:if="{{showMessage}}"><cover-view style="display:inline;">已切换为</cover-view> <cover-view style="color: #F97124;display:inline;">{{selectMultiple}}倍数</cover-view> <cover-view style="display:inline;">播放</cover-view></cover-view>
    <cover-view class="video-more-multiple" wx:if="{{isFullScreen && showMultiple}}" bindtap="closeMultiple">
      <cover-view class="video-more-multiple-main">
        <cover-view style="color: #FFFFFF;font-size: 18px;font-weight: 400;">倍数</cover-view>
        <cover-view class="video-more-multiple-item">
          <cover-view class="multiple-item" wx:for="{{playbackMultiple}}" style="{{item == selectMultiple?'color: #F97124;box-sizing: unset;border-bottom: 4px solid;':''}}" wx:key="item" data-multiple="{{item}}" catchtap="selectMultiple">{{item}}X
            <cover-view style="width:100%;height:4px;background:#F97124;" wx:if="{{item == selectMultiple}}"></cover-view>
          </cover-view>        
        </cover-view>        
      </cover-view>


    </cover-view>
  </video>

CSS部分：

.video-name{
  width: 100%;
  height: 72rpx;
  box-sizing: border-box;
  padding: 0 48rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333333;
}
.video-playback{
  width: 100%;
}
.video-name-text{
  width: 100%;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 600;
  font-size: 24rpx;
  line-height: 24rpx;
  letter-spacing: 0.4rpx;
  color: #FFFFFF;

  overflow:hidden; /* 超出一行文字自动隐藏  */
  text-overflow:ellipsis;/* 文字隐藏后添加省略号 */
  white-space:nowrap;/* 强制不换行 */
}
.video-multiple-play{
  position: absolute;
  top: 5.1%;
  right: 9.7%;
  z-index: 50;
  width: 48px;
  height: 18px;
  border: 2px solid #FFFFFF;
  /* box-sizing: border-box; */
  border-radius: 2px;

  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  color: #FFFFFF;
}
.video-multiple-play-btn[plain]{
  position: absolute;
  /* width: 48px;
  height: 18px; */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 50;
  border: none;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  color: #FFFFFF;
}
.video-more-multiple{
  /* height: 0rpx; */
  /* transition: 0.3; */
  height: 375px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.video-more-multiple-main{
  /* width: 78.3%;   */
  width: 636px;
  height: 125px;
  /* height: 32%; */
  position: absolute;
  left: 7.3%;
  /* bottom: 7.5%; */
bottom: 28px;
}
.video-more-multiple-item{
  /* height: 80%; */
  width: 636px;
  height: 96px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.multiple-item{
  width: 96px;
  height: 96px;
  background: #000000;
  opacity: 0.7;
  border-radius: 4px;
  box-sizing: border-box;

  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 96px;
  text-align: center;
  color: #FFFFFF;
}
/* 切换倍数后的提示 */
.multiple-play-message{
  width: 100%;
  height: 94px;
  box-sizing: border-box;
  padding-top: 35px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 15px;
  text-align: center;
  color: #FFFFFF;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(231, 231, 231, 0) 100%);
  
}

JS部分：

  // 选中倍数
  selectMultiple(e){
    var value = e.currentTarget.dataset.multiple
    this.setData({
      selectMultiple:value,
      showMultiple:false,
      showButtonMultiple:false,
      showMessage:true
    },()=>{
      setTimeout(() => {
        this.setData({
          showMessage:false
        })
      }, 3000);
    })

//关键代码
    this.videoContext.playbackRate(Number(value))
  },

效果图：

微信小程序-设置倍数播放按钮