微信公众号开发

小程序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自定义播放按钮的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!