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

微信(小程序)  /  管理员 发布于 3年前   428

效果图展示：  

实现方法：

在video中添加一个cover-view，在cover-view写两个cover-image，一个用来存储封面图、一个用来存放播放按钮，同级写一个cover-view用来完成封面上的文字，设置绝对定位，水平垂直居中，在播放按钮上添加点击事件，点击之后隐藏cover-view，最后在监听视频结束事件，重新填充封面跟播放按钮就可以了。

代码：

 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组件播放视频功能示例【附源码下载】
• 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
• 微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
• 微信小程序 vidao实现视频播放和弹幕的功能