視頻自定義組件，劃出可視區域時停止播放

微信小程序視屏劃出可視區域時禁止播放：

wxml頁面： 主要是在video標籤中設置id需要唯一

<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>

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()
      }
    })
  },
})