uni-app Android端uni-collapse折叠面板中嵌套video问题：video没有被折叠，会直接显示出来

示例代码：

<uni-collapse>  
    <uni-collapse-item title="使用动画" :show-animation="true">  
        <view>  
            <video src="https://yundms.net/UploadFile/dev/biqsla/186794d14bfb444d9efdbc1ee23e429f.mp4"></video>  
        </view>  
    </uni-collapse-item>  
</uni-collapse>

操作步骤：

<uni-collapse>  
    <uni-collapse-item title="使用动画" :show-animation="true">  
        <view>  
            <video src="https://yundms.net/UploadFile/dev/biqsla/186794d14bfb444d9efdbc1ee23e429f.mp4"></video>  
        </view>  
    </uni-collapse-item>  
</uni-collapse>  

将如上代码运行就能看到bug

预期结果：

需要折叠显示img video text ，要显示时再展开。

实际结果：

在Android端uni-collapse中嵌套video时，不能折叠video，会在屏幕顶层显示，遮盖uni-collapse组件

bug描述：

<uni-collapse>  
    <uni-collapse-item title="使用动画" :show-animation="true">  
        <view>  
            <video src="https://yundms.net/UploadFile/dev/biqsla/186794d14bfb444d9efdbc1ee23e429f.mp4"></video>  
        </view>  
    </uni-collapse-item>  
</uni-collapse>

代码片段如上：功能需求：需要折叠显示img video text ，要显示时再展开。 bug描述：在Android端uni-collapse中嵌套video时，不能折叠video，会在屏幕顶层显示，遮盖uni-collapse组件

wuwangju 1楼•20 天前

信息勘误。我使用的vue3开发！！！

nodeper 2楼•20 天前

原文档在此：https://uniapp.dcloud.net.cn/component/video.html

songsunli 3楼•20 天前

谢谢。我去研究研究

itying888 4楼•20 天前

<uni-collapse> <uni-collapse-item title="使用cover-view" :show-animation="true"> <cover-view> 第一层cover-view

<cover-view> 第二层cover-view </cover-view> </cover-view> </uni-collapse-item> </uni-collapse> 添加coverview后的效果并没改变。video没有折叠成功运行效果如下：

gougou168 5楼•20 天前

自己手动隐藏一下吧，隐藏时把video用css隐藏掉，h5上的video很难搞的

zlyuanteng 6楼•20 天前

一般这种可以先放一张第一帧的图片加上一个播放按钮，做个v-if判断，播放的时候再换成video组件，否则就是显示图片

zlyuanteng 7楼•20 天前

在 uni-app 中，uni-collapse 折叠面板嵌套 video 组件时，可能会出现 video 没有被折叠而直接显示出来的问题。这通常是由于 video 组件的渲染机制导致的。video 组件在页面加载时会立即渲染，即使它被包裹在折叠面板中，也会在页面初始化时显示出来。

解决方案

1. 使用 `v-if` 控制 `video` 的渲染

通过 v-if 或 v-show 动态控制 video 组件的渲染或显示，确保只有在折叠面板展开时才渲染或显示 video 组件。

<template>
  <view>
    <uni-collapse>
      <uni-collapse-item title="视频">
        <video v-if="isVideoVisible" src="your-video-url" controls></video>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isVideoVisible: false
    };
  },
  methods: {
    handleCollapseChange(e) {
      // 根据折叠面板的状态来控制 video 的显示
      this.isVideoVisible = e.detail.show;
    }
  }
};
</script>

2. 使用 `v-show` 控制 `video` 的显示

如果你希望 video 组件在页面加载时就被渲染，但只在折叠面板展开时显示，可以使用 v-show。

<template>
  <view>
    <uni-collapse>
      <uni-collapse-item title="视频">
        <video v-show="isVideoVisible" src="your-video-url" controls></video>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isVideoVisible: false
    };
  },
  methods: {
    handleCollapseChange(e) {
      // 根据折叠面板的状态来控制 video 的显示
      this.isVideoVisible = e.detail.show;
    }
  }
};
</script>

3. 使用 `uni-collapse` 的 `@change` 事件

监听 uni-collapse 的 @change 事件，根据折叠面板的状态来动态控制 video 的渲染或显示。

<template>
  <view>
    <uni-collapse @change="handleCollapseChange">
      <uni-collapse-item title="视频">
        <video v-if="isVideoVisible" src="your-video-url" controls></video>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isVideoVisible: false
    };
  },
  methods: {
    handleCollapseChange(e) {
      // 根据折叠面板的状态来控制 video 的显示
      this.isVideoVisible = e.detail.show;
    }
  }
};
</script>