收藏
回答

视频列表 某一视频不在可视区域暂停该视频

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 video IntersectionObserver 客户端 7.0.4 v1.02.1904090

视频列表 点击播放某一视频当此视频滚动不在可视区域内暂停此视频

根据微信API提供的 IntersectionObserver  可以实现,但是此方法需要外部容器设置固定高度,这样会引起页面滚动时非常卡顿

还有其他解决方案吗? 


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

2 个回答

  • 🍓🍓🍓🍓
    🍓🍓🍓🍓
    2019-07-28

    请问博主解决这个问题了吗?

    2019-07-28
    赞同
    回复 1
    • Daisy
      Daisy
      2019-08-23
      太卡了,没做这个功能,后面使用的是,滚动到当前index的时候,才渲染当前节点的video,并且播放,不过播放也卡(视频播放加载需要时间),所以就没有做了
      2019-08-23
      回复
  • Daisy
    Daisy
    2019-05-31

    楼主,请问IntersectionObserver 是怎么做到观测多个dom对象?我使用

    this.observer.observe("#live1", res => {

            console.log('observer1',res)

          });


    只能观测到第一个对象,之前api有设置观测多个对象的选项,改版后没有找到了

    2019-05-31
    赞同
    回复 8
    • little芈芈
      little芈芈
      2019-06-03

      视频只能播放一个 所以我就是每次点击播放的时候清除之前的就好了

      2019-06-03
      回复
    • Daisy
      Daisy
      2019-06-04回复little芈芈

      哦,api是可以观测多个节点的,清除之前的是清除dom吗?之前用wx.createVideoContext创建的实例是否需要清除?

      2019-06-04
      回复
    • little芈芈
      little芈芈
      2019-06-04回复Daisy

      我用的是官方代码里面的这行代码

      if (this._observer) this._observer.disconnect()


      2019-06-04
      回复
    • Daisy
      Daisy
      2019-06-05回复little芈芈

      if (this._observer) this._observer.disconnect() 这行代码是用在什么时候?

      我目前的做法是,使用observer 监听列表的item,当滚动到可视区域的时候,我就渲染video节点,wx:if="{{currentIndex == index}}",并使用videoContext的api去播放视频;

      前一个video节点,由于index不相等,就不会再渲染了,这样会有点问题,向下滚动的时候,不知道是否由于对节点操作频繁,而导致有时候有些视频无法播放出来,是黑屏。

      请问你的整体实现思路是怎么样的?

      2019-06-05
      回复
    • little芈芈
      little芈芈
      2019-06-05回复Daisy

      首先有一个视频列表,每个视频设置封面图和播放按钮,点击播放按钮的时候隐藏封面图显示视频并且记录当前播放的视频的index, 监听这个视频元素如下:

      this._observer

      .relativeTo('.video'+index)

      .observe('.ball', (res) => {

          

      }) 可以在wxml中循环视频的时候给其设置class ,然后再播放的时候要写上这段代码

      if (this._observer) this._observer.disconnect()


      2019-06-05
      回复
    查看更多(3)
登录 后发表内容