微信小程序poster封面闪逝以及自定义播放按钮

小程序中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)
    }
  }
})

效果图：