小程序中poster封面闪消失,以及用图片自定义播放按钮,注意下面是以组件的形式来写非页面如下:
wxml:
view video id='myvedio' bindended="endvedio" style="width: 100%;height=400px;margin:1px;" src="{{data}}" binderror="videoErrorCallback" cover-view wx:if="{{show}}" bindtap="playvedio" class='coversrc' style='position:relative' cover-image class='img' src='../../images/ni.jpg'/cover-image cover-view class='playbtn' cover-image src='../../images/play.jpg'/cover-image /cover-view /cover-view /video/viewwxss
/* components/vedio/index.wxss */.coversrc{ position: relative; width: 100%; height: 100%;}.img{ width: 100%; opacity: 0.5;}.playbtn{ position: absolute; top:50%; left:50%; background: red; width: 3rem; height:3rem; margin-top:-1.5rem; margin-left: -1.5rem;}js:
// components/vedio/index.jsComponent({ /** * 组件的属性列表 */ properties: { data:String }, /** * 组件的初始数据 */ data: { show:true }, /** * 组件的方法列表 */ methods: { /* *点击自定义视频封面开始播放 */ playvedio:function(e){ let vediocon=wx.createVideoContext("myvedio",this) vediocon.play() console.log(vediocon) this.setData({ show:false }) }, /* *视频播放完毕重新上封面 */ endvedio:function(){ let vediocon = wx.createVideoContext("myvedio", this) // vediocon.play() console.log(vediocon) this.setData({ show: true }) }, /** * 当发生错误时触发error事件,event.detail = {errMsg: 'something wrong'} */ videoErrorCallback: function (e) { console.log('视频错误信息:') console.log(e.detail.errMsg) } }})效果图:













