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

微信小程序中自定义组件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.js
Component({
  /**
   * 组件的属性列表
   */
  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>