小程序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