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