小程序video自定义播放按钮

小程序video组队的默认样式是无法修改的，实现方式是隐藏组件的播放按钮，再自己实现播放暂停的交互。

wxml结构

隐藏掉 中间按钮show-center-play-btn 和 底部按钮show-play-btn

<video
    class="video"
    id="video_player"
    src="http://www.ydyyjkgj.com/video-ziyuan/Voicechat/16687/18190/14998/19842/8A71DFDEC9279E321BAE110D71653CEE102428.mp4"
    show-center-play-btn="{{false}}"
    show-play-btn="{{false}}"
    enable-play-gesture
    bindplay="triggerPlay"
    bindpause="triggerPause"
  	bindended="triggerEnd"
    bindcontrolstoggle="controlsToggle"
    bindtouchmove="touchMove"
    bindtouchend="touchEnd">
    <view class="control-icon" hidden="{{!controlShow}}">
      <image hidden="{{isPlay}}" src="./icon-play.png" bindtap="handlePlay"></image>
      <image hidden="{{!isPlay}}" src="./icon-pause.png" bindtap="handlePause"></image>
    </view>
  </video>

js内容

这里注意wx.createVideoContext，我这里video是直接写在页面
如果是写在组件里，wx.createVideoContext第二个参数要传this
例如：this.videoContext = wx.createVideoContext('video_player', this)

Page({
  data: {
    isPlay: false,
    controlShow: false
  },
  onLoad() {
    this.videoContext = wx.createVideoContext('video_player')
  },
  // 播放
  handlePlay() {
    this.videoContext.play()
  },
  // 暂停
  handlePause() {
    this.videoContext.pause()
  },
  // 触发播放、暂停
  triggerPlay() {
    this.setData({
      isPlay: true
    })
  },
  triggerPause() {
    this.setData({
      isPlay: false
    })
  },
  // 播放结束，安卓没有触发暂停，未能修改播放按钮，在这里手动修改
  triggerEnd() {
    this.setData({
      isPlay: false
    })
  },
  // 控制按钮和 controls 显隐同步
  controlsToggle(e) {
    const { show } = e.detail
    this.setData({
      controlShow: show
    })
  },
  // 屏幕滑动进度时，隐藏按钮，避免遮挡
  // 这里拖拽进度条，无法触发滑动事件，有解决方案的小伙伴欢迎在下方评论哦
  touchMove() {
    this.setData({
      controlShow: false
    })
  },
  touchEnd() {
    this.setData({
      controlShow: true
    })
  }
})

代码片段：https://developers.weixin.qq.com/s/zwJgpImN78vR