小程序
小游戏
企业微信
微信支付
扫描小程序码分享
视频列表 点击播放某一视频当此视频滚动不在可视区域内暂停此视频
根据微信API提供的 IntersectionObserver 可以实现，但是此方法需要外部容器设置固定高度，这样会引起页面滚动时非常卡顿
还有其他解决方案吗？
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
请问博主解决这个问题了吗？
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
楼主，请问IntersectionObserver 是怎么做到观测多个dom对象？我使用
this.observer.observe("#live1", res => {
console.log('observer1',res)
});
只能观测到第一个对象，之前api有设置观测多个对象的选项，改版后没有找到了
视频只能播放一个 所以我就是每次点击播放的时候清除之前的就好了
哦，api是可以观测多个节点的，清除之前的是清除dom吗？之前用wx.createVideoContext创建的实例是否需要清除？
我用的是官方代码里面的这行代码
if (this._observer) this._observer.disconnect()
if (this._observer) this._observer.disconnect() 这行代码是用在什么时候？
我目前的做法是，使用observer 监听列表的item，当滚动到可视区域的时候，我就渲染video节点，wx:if="{{currentIndex == index}}"，并使用videoContext的api去播放视频；
前一个video节点，由于index不相等，就不会再渲染了，这样会有点问题，向下滚动的时候，不知道是否由于对节点操作频繁，而导致有时候有些视频无法播放出来，是黑屏。
请问你的整体实现思路是怎么样的？
首先有一个视频列表，每个视频设置封面图和播放按钮，点击播放按钮的时候隐藏封面图显示视频并且记录当前播放的视频的index, 监听这个视频元素如下：
this._observer
.relativeTo('.video'+index)
.observe('.ball', (res) => {
}) 可以在wxml中循环视频的时候给其设置class ,然后再播放的时候要写上这段代码
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
请问博主解决这个问题了吗？
楼主，请问IntersectionObserver 是怎么做到观测多个dom对象？我使用
this.observer.observe("#live1", res => {
console.log('observer1',res)
});
只能观测到第一个对象，之前api有设置观测多个对象的选项，改版后没有找到了
视频只能播放一个 所以我就是每次点击播放的时候清除之前的就好了
哦，api是可以观测多个节点的，清除之前的是清除dom吗？之前用wx.createVideoContext创建的实例是否需要清除？
我用的是官方代码里面的这行代码
if (this._observer) this._observer.disconnect()
if (this._observer) this._observer.disconnect() 这行代码是用在什么时候？
我目前的做法是，使用observer 监听列表的item，当滚动到可视区域的时候，我就渲染video节点，wx:if="{{currentIndex == index}}"，并使用videoContext的api去播放视频；
前一个video节点，由于index不相等，就不会再渲染了，这样会有点问题，向下滚动的时候，不知道是否由于对节点操作频繁，而导致有时候有些视频无法播放出来，是黑屏。
请问你的整体实现思路是怎么样的？
首先有一个视频列表，每个视频设置封面图和播放按钮，点击播放按钮的时候隐藏封面图显示视频并且记录当前播放的视频的index, 监听这个视频元素如下：
this._observer
.relativeTo('.video'+index)
.observe('.ball', (res) => {
}) 可以在wxml中循环视频的时候给其设置class ,然后再播放的时候要写上这段代码
if (this._observer) this._observer.disconnect()