小程序中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)
}
}
})
效果图: