小程序点击video暂停/开始

因为video是全屏显示的，所有将控件全部隐藏了，这样就不能没有了点击暂停按钮。所以要自定义。

 <video
    id="myVideo"
    src="{{videoUrl}}"
    loop='true'
    controls='{{controls}}'
    show-fullscreen-btn='{{controls}}'
    autoplay="true"
    object-fit='cover'
   bindtap='videoTap'
  >

  <cover-image class="playImg" src="../../images/pause.png" wx:if="{{play}}">cover-image>
  video>
  

当play==true 图片显示
playImg是显示播放的一个按钮在中间显示

.playImg{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 94rpx;
  height: 94rpx;
}

Page(){
	data:{
		play:false
	},
//点击暂停/开始
  videoTap:function(){
  	//获取video
    this.videoContext = wx.createVideoContext('myVideo')
    if (this.data.play){
    //开始播放
      this.videoContext.play()//开始播放
      this.setData({
        play:false
      })
    }else{
    //当play==false 显示图片 暂停
    
      this.videoContext.pause()//暂停播放
      this.setData({
        play: true
      })
    }
   } 
  },

VideoContext 实例，可通过 wx.createVideoContext 获取。

VideoContext 通过 id 跟一个 video 组件绑定，操作对应的 video 组件。

微信文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html

这是暂停画面，中间有个图标显示。
再次点击就是开始播放。

VideoContext.stop()
停止视频
VideoContext.pause()
暂停视频
这两个一定要用清楚。
stop() 停止后 再次点击播放是视频从头播放的不是想要的效果
pause() 暂停，再次播放是继续暂停时间开始播放的