uniapp 实现一个页面，瀑布流播放视频

最新推荐文章于 2025-05-08 12:01:17 发布

林个名真系难

最新推荐文章于 2025-05-08 12:01:17 发布

阅读量838

点赞数

文章标签： uni-app 音视频

本文链接：https://blog.youkuaiyun.com/csdn_hello_work/article/details/132900618

版权

本文介绍了使用uni-app实现瀑布流播放视频页面的步骤，包括确定数据来源（接口或本地存储）、利用uni-app组件进行布局、使用组件播放视频、监听列表滚动事件以自动播放可视区域视频，还给出代码示例及相关控制要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要实现一个瀑布流播放视频的页面，需要以下步骤：

确定数据来源：确定视频数据的来源，可以是通过接口获取或者通过本地存储获取。
组件布局：使用uniapp提供的组件可以实现瀑布流布局，例如使用uni-list来进行布局，可以设置grid属性，从而实现类似于瀑布流的效果。
播放视频：使用uni-video组件来播放视频，设置src属性为对应视频的地址即可。
监听列表滚动事件：当滚动列表时，判断当前的视频是否已经出现在可视区域，如果出现则自动播放视频。

下面是代码示例：

<template>
  <view>
    <uni-list :grid="gridConfig" :data-source="videoList" :scroll-top="scrollTop" @scroll="onListScroll">
      <view slot="grid" class="video-item">
        <uni-video :src="item.videoUrl" @play="onVideoPlay(index)" controls></uni-video>
      </view>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoList: [], // 视频列表数据
      gridConfig: { 
        columnNum: 2, // 列数
        border: true, // 是否显示边框
        square: false, // 是否正方形布局
        clickable: true // 是否可点击
      },
      scrollTop: 0 // 当前列表滚动距离
    }
  },

  onVideoPlay(index) {
    // 播放当前选中的视频
    uni.createVideoContext(`video-${index}`).play()
  },

  onListScroll(e) {
    // 获取当前滚动距离
    this.scrollTop = e.detail.scrollTop

    // 查找当前可视区域内的视频
    this.videoList.forEach((item, index) => {
      const query = uni.createSelectorQuery().in(this)
      query.select(`#video-${index}`).boundingClientRect()
      query.exec((res) => {
        const rect = res[0]
        const windowHeight = uni.getSystemInfoSync().windowHeight

        if (rect.top <= windowHeight && rect.bottom >= 0) {
          // 当前视频出现在可视区域，播放视频
          uni.createVideoContext(`video-${index}`).play()
        } else {
          // 当前视频不在可视区域，暂停视频
          uni.createVideoContext(`video-${index}`).pause()
        }
      })
    })
  }
}
</script>

需要注意的是，在播放视频时需要使用uni.createVideoContext来创建视频的上下文并进行控制。同时，需要监听@play事件来确定播放哪个视频。在滚动列表时，需要使用uni.createSelectorQuery获取组件的位置信息，从而可以确定组件是否出现在可视区域，然后使用uni.createVideoContext来进行视频的播放和暂停。