微信小程序video自定义播放与暂停按钮

1.实现效果

2.实现原理

官网：https://developers.weixin.qq.com/miniprogram/dev/component/video.html
相关API:wx.createVideoContext(string id, Object this)

属性：

3.此demo所用到的属性有

controls：是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
muted：是否静音
show-play-btn：是否显示视频底部控制栏的播放按钮
show-center-play-btn：是否显示视频中间的播放按钮
show-mute-btn：是否显示静音按钮
事件：
bindended:当播放到末尾时触发 ended 事件
接口：
wx.createVideoContext(string id, Object this)

4.完整代码（更多代码移至码云）

https://gitee.com/susuhhhhhh/wxmini_demo

5.部分代码

<!--pages/another/mroevideos/index.wxml-->
<view class="c1_box">
  <view class="v1_box" catchtap="showPlaybtn" data-type="v1">
    <video id='myVideo0'  show-play-btn="{{false}}" show-center-play-btn="{{false}}"  picture-in-picture-show-progress="{{true}}" poster="https://i.postimg.cc/j57Lwdy3/123.png" src="https://static.51dh.com.cn/dbp/12/98/4494bd8a6e0fcd4a992f25a42bea28f8d1fb.mp4"  show-mute-btn="{{true}}" muted="{{true}}" bindended="showEndBtn" data-type="v1"></video>
    <!-- 暂停按钮 -->
    <image src="/img/pause.png" class="pause_icon " catchtap="tobePlay" data-type="v1" hidden="{{!v1_play}}"></image>
    <!-- 播放按钮 -->
    <image src="/img/play.png" class="pause_icon" catchtap="tobePause"  data-type="v1"   hidden="{{v1_pause}}"></image>
  </view>
</view>

<view class="c1_box">
  <view class="v1_box" catchtap="showPlaybtn" data-type="v2">
    <video id='myVideo1'  show-play-btn="{{false}}" show-center-play-btn="{{false}}"  picture-in-picture-show-progress="{{true}}" poster="https://i.postimg.cc/FsKgQ95T/yy.png" src="https://static.51dh.com.cn/dbp/12/98/4494bd8a6e0fcd4a992f25a42bea28f8d1fb.mp4"  show-mute-btn="{{true}}" muted="{{true}}" bindended="showEndBtn" data-type="v2"></video>
    <!-- 暂停按钮 -->
    <image src="/img/pause.png" class="pause_icon " catchtap="tobePlay" data-type="v2" hidden="{{!v2_play}}"></image>
    <!-- 播放按钮 -->
    <image src="/img/play.png" class="pause_icon" catchtap="tobePause"  data-type="v2"   hidden="{{v2_pause}}"></image>
  </view>
</view>
<!-- 
  video的属性：
  controls：是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
  autoplay:自动播放
  loop：是否循环
  muted：是否静音
  show-play-btn：是否显示视频底部控制栏的播放按钮
  show-center-play-btn：是否显示视频中间的播放按钮
  show-mute-btn：是否显示静音按钮
  enable-play-gesture:是否开启播放手势，即双击切换播放/暂停

  bindended:当播放到末尾时触发 ended 事件
-->

/* pages/another/mroevideos/index.wxss */
page{
  background-color: #a4d1eb;
}
.c1_box{
  width: 750rpx;
  height: 520rpx;
  position: relative;
  z-index: 99;
}
.pause_icon{
  position: absolute;
  width: 84rpx;
  height: 84rpx;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
}
.v1_box{
  width:750rpx;
  height: 500rpx;
  position: absolute;
  top: 0;
}
video{
  width: 100%;
  height: 100%;
  display: block;
}

// pages/another/mroevideos/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //视频
    v1_play:true,//默认的显示播放的按钮
    v1_pause:true,//默认不显示暂停的按钮

    v2_play:true,//默认的显示播放的按钮
    v2_pause:true,//默认不显示暂停的按钮
  },

  
  onLoad: function (options) {

  },

  
  onReady: function () {

  },

  
  onShow: function () {

  },
  //控制视频播放
  tobePlay(e){
    let {type}=e.currentTarget.dataset;
    let data_va1='',data_va2="";

    if(type=="v1"){
      wx.createVideoContext('myVideo0').play();
      data_va1='v1_play';
      data_va2="v1_pause";
    }
    if(type=="v2"){
      wx.createVideoContext('myVideo1').play();
      data_va1='v2_play';
      data_va2="v2_pause";
    }
    if(type=="v3"){
      wx.createVideoContext('myVideo2').play();
      data_va1='v3_play';
      data_va2="v3_pause";
    }

    setTimeout(()=>{
      this.setData({
        [data_va1]:false,
        [data_va2]:false,
      },setTimeout(()=>{
        this.setData({
          [data_va2]:true,
        })
      },3000))
    },100)
  },
  //显示播放的按钮
  showPlaybtn(e){
    let {type}=e.currentTarget.dataset;
    let data_va='';

    if(type=="v1"){
      if(this.data.v1_play){
        return false
      }
      data_va='v1_pause'
    }
    if(type=="v2"){
      if(this.data.v2_play){
        return false
      }
      data_va='v2_pause'
    }
    if(type=="v3"){
      if(this.data.v3_play){
        return false
      }
      data_va='v3_pause'
    }

    this.setData({
      [data_va]:false,
    },setTimeout(()=>{
      this.setData({
        [data_va]:true,
      })
    },3000))
  },
  //暂停视频的播放
  tobePause(e){
    let {type}=e.currentTarget.dataset;
    let data_va1='',data_va2="";
    
    if(type=="v1"){
      wx.createVideoContext('myVideo0').pause();
      data_va1="v1_play";
      data_va2="v1_pause";
    }
    if(type=="v2"){
      wx.createVideoContext('myVideo1').pause();
      data_va1="v2_play";
      data_va2="v2_pause";
    }
    if(type=="v3"){
      wx.createVideoContext('myVideo2').pause();
      data_va1="v3_play";
      data_va2="v3_pause";
    }

    setTimeout(()=>{
      this.setData({
        [data_va1]:true,
        [data_va2]:true,
      })
    },100)
  },

  //视频播放到末尾触发的事件 视频播放结束 显示暂停的按钮
  showEndBtn(e){
    //显示暂停按钮 隐藏播放按钮
    let {type}=e.currentTarget.dataset;
    let data_va='',data_va1="";
    if(type=="v1"){
      data_va="v1_play",
      data_va1="v1_pause"
    }
    if(type=="v2"){
      data_va="v2_play",
      data_va1="v2_pause"
    }
    if(type=="v3"){
      data_va="v3_play",
      data_va1="v3_pause"
    }
    this.setData({
      [data_va]:true,
      [data_va1]:true,
    })
  }
  
})