收藏
回答

createIntersectionObserver同时观察image和video的问题?

js代码

const videoObserve = wx.createIntersectionObserver(this, {observeAll: true})
videoObserve.relativeToViewport({bottom: -topBottomPadding, top: -topBottomPadding})
.observe(`.video`, (res) => {
    if (res.intersectionRatio === 0) {
        let current = self.data.down ? res.dataset.index + 1 : res.dataset.index - 1
        self.setData({
          currentVideo: current
        })  
    }
}
})

wxml代码

 <image 
        class="video" 
        id="vid{{index}}" 
        data-index="{{index}}"
        wx:if="{{currentVideo != index}}"
        src="{{ staticHost + item.cover }}"
      </image>
      <video
          wx:else
          class="video" 
          id="vid{{index}}"
          data-index="{{index}}"
          src="{{staticHost + item.src}}"
          autoplay='{{index == 0 ? true : false}}' 
          bindended="end"
          bindwaiting="waiting"
          bindtimeupdate="timeupdate"
          play-btn-position="center"
          poster="{{ staticHost + item.cover }}"
          loop="true"
          initial-time='{{ item.history.watched_at || 0 }}'
          show-fullscreen-btn="{{false}}"
          controls>
      </video>

目的是滑动屏幕,观察到的自动播放视频,其他则用image代替。

出现的问题:观察的数据中间隔了一个,就是连续播放视频,中间会空一个图片没有观察到。

出现这种情况的原因是什么?

回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容
问题标签