1. 程式人生 > >微信小程式poster封面閃逝以及自定義播放按鈕

微信小程式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)
    }
  }
})

效果圖: