效果图展示:
实现方法:
在video中添加一个cover-view,在cover-view写两个cover-image,一个用来存储封面图、一个用来存放播放按钮,同级写一个cover-view用来完成封面上的文字,设置绝对定位,水平垂直居中,在播放按钮上添加点击事件,点击之后隐藏cover-view,最后在监听视频结束事件,重新填充封面跟播放按钮就可以了。
代码:
<video id="myVideo" src="{{videoSrc}}" enable-danmu controls show-fullscreen-btn show-center-play-btn="{{false}}" auto-pause-if-navigate auto-pause-if-open-native show-play-btn object-fit="fill" bindpause="bindpause" bindended="bindended" >
<cover-view class="video_cover" wx:if="{{isShow}}" bindtap="bindplay">
<cover-image src="{{videoCoverImg}}" mode="widthFix"></cover-image>
<cover-image src="{{videoPlayIcon}}" mode="widthFix" class="video_play_icon"></cover-image>
<cover-view class="video_bg_black">
<cover-view class="video_cover_txt">
<cover-view>
<cover-view class="video_txt">1天1元,开通VIP</cover-view>
<cover-view class="video_txt">更多优质视频等你来解锁</cover-view>
</cover-view>
<cover-image src="{{videoLockIcon}}" class="video_icon_lock" mode="widthFix"></cover-image>
</cover-view>
</cover-view>
</cover-view>
</video>
Page({
data: {
isShow:true,
videoSrc:'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', // 视频
videoCoverImg:'http://img5.imgtn.bdimg.com/it/u=1672477765,2527992874&fm=26&gp=0.jpg', // 视频封面图
videoPlayIcon:'http://39.105.134.221:8080/test/source1.png', // 视频播放icon
videoLockIcon:'http://39.105.134.221:8080/test/source2.png', // 视频播放锁
},
onReady: function () {
this.videoContext = wx.createVideoContext('myVideo')
},
// 点击封面自定义播放按钮时触发
bindplay() {
this.setData({
isShow:false
})
this.videoContext.play();
console.log('play')
},
// 监听播放到末尾时触发
bindended(){
console.log('bindended')
this.setData({
isShow: true
})
this.videoContext.ended();
},
// 监听暂停播放时触发
bindpause(){
console.log('pause')
}
})
转载:https://blog.csdn.net/Miss_liangrm/article/details/103779498