E企盈营销工具技术服务商 热线:4006-838-530

微信小程序视频组件ios端出现视屏区域黑屏

E企盈直播平台营销卖货系统

微信小程序中自定义组件video在ios端会出现从展示页面切到另一个页面上再回到展示页面时会黑屏的情况。解决思路:在app.js中获取手机类型并定义isApple的全局变量  ->   在video的组件中使用show和hidden生命周期,在页面出现的时候重新加载一次解决。app.js页面App({  onLaunch: function () {    loginReq.login();    // 自适应导航栏    wx.getSystemInfo({      success: (res) => {        this.globalData.height = res.statusBarHeight        let clientHeight = res.windowHeight,          clientWidth = res.windowWidth,          rpxR = 750 / clientWidth;        this.globalData.contentPadding = res.statusBarHeight * rpxR + 100,          this.globalData.shareTop = res.statusBarHeight * rpxR + 122        if (res.system.indexOf(‘iOS’) > -1) {          this.globalData.isApple = true;        }else{          this.globalData.isApple = false;        }      }    })  },  globalData: {    isApple:false,  }})video页面// component/video/video.jsComponent({  /**   * 组件的属性列表   */  properties: {    attr: {      type: Object,    }  },  /**   * 组件的初始数据   */  data: {    //苹果手机需要为true控制页面的展示    show:true  },  //ios出现黑屏的情况  pageLifetimes: {    show: function () {      //判断是苹果手机video重新展示      if (getApp().globalData.isApple){        this.setData({          show: true        })      }    },    hide: function () {      if (getApp().globalData.isApple) {        this.setData({          show:false        })      }    }  },  // 组件的方法列表  methods: {    end1: function () {      this.video.seek(0)    },  }})wxml页面  在video标签添加wx:if判断即可  <video  wx:if=”{{show}}” id=’video{{attr.moduleId}}’   object-fit=”cover” poster=”{{attr.attributeJson.screenShotUrl}}” bindended=’end1′ autoplay=”{{attr.attributeJson.autoPlayBl}}” src=”{{attr.attributeJson.videoUrl}}”  vslide-gesture-in-fullscreen controls ></video>

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序视频组件ios端出现视屏区域黑屏
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏