微信小程式poster封面閃逝以及自定義播放按鈕
阿新 • • 發佈:2018-11-25
小程式中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) } } })
效果圖: