因为video是全屏显示的,所有将控件全部隐藏了,这样就不能没有了点击暂停按钮。所以要自定义。
<video
id="myVideo"
src="{{videoUrl}}"
loop='true'
controls='{{controls}}'
show-fullscreen-btn='{{controls}}'
autoplay="true"
object-fit='cover'
bindtap='videoTap'
>
<cover-image class="playImg" src="../../images/pause.png" wx:if="{{play}}"></cover-image>
</video>
当play==true 图片显示
playImg是显示播放的一个按钮在中间显示
.playImg{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 94rpx;
height: 94rpx;
}
Page(){
data:{
play:false
},
//点击暂停/开始
videoTap:function(){
//获取video
this.videoContext = wx.createVideoContext('myVideo')
if (this.data.play){
//开始播放
this.videoContext.play()//开始播放
this.setData({
play:false
})
}else{
//当play==false 显示图片 暂停
this.videoContext.pause()//暂停播放
this.setData({
play: true
})
}
}
},
VideoContext 实例,可通过 wx.createVideoContext 获取。
VideoContext 通过 id 跟一个 video 组件绑定,操作对应的 video 组件。
微信文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html
这是暂停画面,中间有个图标显示。
再次点击就是开始播放。
VideoContext.stop()
停止视频
VideoContext.pause()
暂停视频
这两个一定要用清楚。
stop() 停止后 再次点击播放是视频从头播放的不是想要的效果
pause() 暂停,再次播放是继续暂停时间开始播放的