这篇文章给大家分享的是有关微信小程序中video视频如何实现自定义播放按钮、封面图、视频封面上文案的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
专业从事网站建设、成都网站建设,高端网站制作设计,成都微信小程序,网站推广的成都做网站的公司。优秀技术团队竭力真诚服务，采用html5+CSS3前端渲染技术，成都响应式网站建设公司，让网站在手机、平板、PC、微信下都能呈现。建站过程建立专项小组，与您实时在线互动，随时提供解决方案，畅聊想法和感受。
效果图展示：
实现方法：
在video中添加一个cover-view，在cover-view写两个cover-image，一个用来存储封面图、一个用来存放播放按钮，同级写一个cover-view用来完成封面上的文字，设置绝对定位，水平垂直居中，在播放按钮上添加点击事件，点击之后隐藏cover-view，最后在监听视频结束事件，重新填充封面跟播放按钮就可以了。
代码：
1天1元，开通VIP
更多优质视频等你来解锁
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')
}
})
.video_cover{
width:100%;
height:100%;
position:relative;
}
.video_play_icon{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:40px;
height:40px;
z-index:5
}
.video_bg_black{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
background:rgba(0,0,0,.5);
}
.video_cover_txt{
display:flex;
justify-content: flex-end;
align-items: center;
text-align:right;
color: #fff;
font-size: 28rpx;
margin-top: 35rpx;
height: 90rpx;
}
.video_icon_lock{
width:30rpx;
height: auto;
margin:0 30rpx;
}
.video_txt{
margin:10rpx auto;
}
感谢各位的阅读！关于“微信小程序中video视频如何实现自定义播放按钮、封面图、视频封面上文案”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
分享文章：微信小程序中video视频如何实现自定义播放按钮、封面图、视频封面上文案
链接地址：
http://bjjierui.cn/article/gopjep.html
