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

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

浏览量:602 时间: 来源:GQ_cyan

小程序中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.jsComponent({  /**   * 组件的属性列表   */  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)    }  }})

效果图:

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎