小程序video自定义播放按钮

html:

<video show-center-play-btn="{{false}}" 
       controls="{{false}}" 
       id="video"
       src='{{article.video}}'></video>

<!-- 播放按钮 -->
<view class='video-play'>
    <image  bindtap="videoPlay" class='video-btn' src='/images/icon/class/play.png'/>
    <image  bindtap="videoPause" class='video-btn' src='/images/icon/class/pause.png'/>
</view>

js:

// 播放
videoPlay() {
   console.log('开始播放')
   
   var videoplay = wx.createVideoContext('video')
   videoplay.play()
},
    
 // 暂停播放
videoPause(){
   console.log('暂停播放')
   
   var videoplay = wx.createVideoContext('video')
   videoplay.pause()
},

注意：

1. wx.createVideoContext(‘video’), 这里的’video’是对应的<video id="video">

2. show-center-play-btn 和 controls 设置值的时候，要写成="{{false}}"才会生效

3.隐藏播放键在开发者工具中无效，要用真机调试才看的出来