小程序中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> </view>wxss
/* 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.js Component({ /** * 组件的属性列表 */ 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) } } })效果图：
