uni-app <list-view>和<video>组件冲突

uni-app <list-view>和

操作步骤：

附件demo已上传，导入编辑器运行即可

预期结果：

list-view长列表可以嵌套video播放器，且正常播放，类似西瓜视频的那种效果

实际结果：

list-view和video组件冲突：
1. 首次点击播放时，视频变形，需要手动滚动一下屏幕才显示正常。
2. controls="true"失效。

bug描述：

list-view和video组件冲突：
1. 首次点击播放时，视频变形，需要手动滚动一下屏幕才显示正常。
2. controls="true"失效。

下载test.zip

gougou168 1楼•12 天前

一般list中会显示一张图片加播放按钮点击在播放视频，或者滑动到当前位置在显示视频播放

wuwangju 2楼•12 天前

我现在就是改用你这个思路，不过官方的list-view也确实存在该bug，改用scroll-view是正常的，不过scroll-view对于长列表不友好

yuanlaile 3楼•12 天前

在 uni-app 中，<list-view> 和 <video> 组件可能会存在一些冲突，尤其是在滚动列表时，视频播放可能会出现异常。以下是一些常见的问题和解决方案：

常见问题

视频播放异常：在滚动列表时，视频可能会暂停、卡顿或无法正常播放。
视频层级问题：视频可能会被列表项覆盖，导致无法正常显示或交互。
性能问题：在列表中嵌入多个视频可能会导致页面性能下降，尤其是在低端设备上。

解决方案

1. 使用 `scroll-view` 替代 `list-view`

list-view 是 uni-app 中的一个高性能列表组件，但在某些情况下，使用 scroll-view 可以更好地控制视频的播放行为。

<scroll-view scroll-y="true" style="height: 100vh;">
  <view v-for="(item, index) in list" :key="index">
    <video :src="item.videoUrl" controls></video>
  </view>
</scroll-view>

2. 使用 `lazy-load` 或 `on-demand` 加载视频

在列表中，可以延迟加载视频，只有当用户滚动到该视频时才加载和播放视频，以减少性能开销。

<scroll-view scroll-y="true" style="height: 100vh;">
  <view v-for="(item, index) in list" :key="index">
    <video v-if="activeIndex === index" :src="item.videoUrl" controls></video>
  </view>
</scroll-view>

export default {
  data() {
    return {
      list: [
        { videoUrl: 'https://example.com/video1.mp4' },
        { videoUrl: 'https://example.com/video2.mp4' },
        // ...
      ],
      activeIndex: 0
    };
  },
  methods: {
    onScroll(e) {
      const scrollTop = e.detail.scrollTop;
      // 根据滚动位置计算当前可见的视频索引
      this.activeIndex = Math.floor(scrollTop / 300); // 假设每个视频高度为300px
    }
  }
};

3. 使用 `cover-view` 和 `cover-image` 解决层级问题

如果视频被列表项覆盖，可以使用 cover-view 和 cover-image 来确保视频始终在最上层。

<video :src="videoUrl" controls>
  <cover-view class="controls">
    <!-- 自定义控制按钮 -->
  </cover-view>
</video>

4. 优化视频播放

在滚动时暂停视频播放，以减少性能开销。

export default {
  data() {
    return {
      list: [
        { videoUrl: 'https://example.com/video1.mp4' },
        { videoUrl: 'https://example.com/video2.mp4' },
        // ...
      ],
      activeIndex: 0
    };
  },
  methods: {
    onScroll(e) {
      const scrollTop = e.detail.scrollTop;
      const newActiveIndex = Math.floor(scrollTop / 300); // 假设每个视频高度为300px
      if (newActiveIndex !== this.activeIndex) {
        // 暂停之前的视频
        this.pauseVideo(this.activeIndex);
        this.activeIndex = newActiveIndex;
      }
    },
    pauseVideo(index) {
      const videoContext = uni.createVideoContext(`video${index}`);
      videoContext.pause();
    }
  }
};

5. 使用 `web-view` 嵌入视频

如果以上方法都无法解决问题，可以考虑使用 web-view 嵌入视频，但这种方式可能会增加复杂性。

<web-view :src="videoUrl"></web-view>