微信小程序的video组件,更改播放按钮
小程序的video的按钮是白色的,当视频封面也是白色的时候会看不到播放按钮这里我用的是Mpvue来写的,换成原生的话,道理其实一样的代码如下:<videoid="myvideo"object-fit="fill"class="myvideo video-js vjs-fluid":src="videoinfo.play_urls....
·
小程序的video的按钮是白色的,当视频封面也是白色的时候会看不到播放按钮
这里我用的是Mpvue来写的,换成原生的话,道理其实一样的
代码如下:
<video
id="myvideo"
object-fit="fill"
class="myvideo video-js vjs-fluid"
:src="videoinfo.play_urls.mp4"
:poster="videoinfo.cover_data.original"
@play="playvideo"
@pause="pausePlay"
:show-center-play-btn="false"
:enable-play-gesture="true"
>
<image v-show="playBtnShow" class="video_play_icon" @click="playvideo" src="xxx/default/advertisement/mdls_zjkp_bofang%402x.png"></image>
</video>
data(){
return {
playBtnShow:true
}
},
methods:{
console.log('play')
this.playBtnShow = false
var videoplay = wx.createVideoContext('myvideo')
videoplay.play()
},
pausePlay(){
this.playBtnShow = true
}
<style lang='less'>
.myvideo{
height: 211px;
width: 375px;
.video_play_icon{
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 40px;
height: 40px;
z-index: 999
}
}
</style>
``
更多推荐
已为社区贡献4条内容
所有评论(0)