小程序video自定义播放按钮

本文主要是介绍小程序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="handlePlay"
    bindpause="handlePause"
    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
  },
  onl oad() {
    this.videoContext = wx.createVideoContext('video_player')
  },
  // 播放
  handlePlay() {
    this.setData({
      isPlay: true
    })
    this.videoContext.play()
  },
  // 暂停
  handlePause() {
    this.setData({
      isPlay: false
    })
    this.videoContext.pause()
  },
  // 控制按钮和 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/P7cvQHmF7AvG

这篇关于小程序video自定义播放按钮的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！