视频自定义组件，划出可视区域时停止播放

微信小程序视屏划出可视区域时禁止播放：

wxml页面： 主要是在video标签中设置id需要唯一

js中添加

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    attr: {
      type: Object,
    }
  },

  //组件的初始数据
  data: {
    currentTime: 0,
    //苹果手机需要为true控制页面的展示
    show:true
  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 获取自己的videoid
    attached: function () {
      this.video = wx.createVideoContext("video" + this.data.attr.moduleId, this);
    }
  },
  //添加判断划出屏幕就不播放
  ready:function () {
    this.createIntersectionObserver().relativeToViewport().observe("#" + "video" + this.data.attr.moduleId, (res) => {
      if (res.intersectionRatio > 0 && this.data.attr.autoPlay) {
        this.video.play()
      } else {
        this.video.pause()
      }
    })
  },
})