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代替。
出现的问题:观察的数据中间隔了一个,就是连续播放视频,中间会空一个图片没有观察到。
出现这种情况的原因是什么?
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)