好资源导航 » 文章资讯 » 微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案

微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案

2023-08-03 15:36:04 63

效果图展示：

实现方法：

在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:030rpx;
}
.video_txt{
margin:10rpxauto;
}

总结

以上所述是小编给大家介绍的微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案

热门推荐

随机推荐

微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案