uniapp中video组件的cover-view怎么使用

在uniapp中，video组件的cover-view具体应该如何使用？我尝试在video组件内添加cover-view，但发现无法正常显示或覆盖在视频上方。请问正确的写法是什么？是否需要设置特殊的样式或层级？能否提供一个简单的示例代码？

2 回复

在video组件内部使用cover-view，可以覆盖在视频上显示内容。例如：

<video>
  <cover-view class="cover">这是覆盖层</cover-view>
</video>

注意：cover-view只能放在video组件内，支持文本、图片等基础内容。


在 UniApp 中，cover-view 是专门用于覆盖在原生组件（如 video、map、camera 等）上层的视图容器，解决普通组件无法覆盖原生组件的问题。以下是 cover-view 在 video 组件中的使用方法：

基本用法

  1. 结构：将 cover-view 作为 video 组件的子元素，直接嵌套在 video 标签内。
  2. 作用：用于添加自定义控件（如播放按钮、进度条、标题等）。

代码示例

<template>
  <view>
    <video src="https://example.com/sample.mp4" controls>
      <!-- cover-view 必须放在 video 内部 -->
      <cover-view class="custom-control">
        <cover-image src="/static/play-icon.png" @click="togglePlay"></cover-image>
        <cover-view class="title">视频标题</cover-view>
      </cover-view>
    </video>
  </view>
</template>

<script>
export default {
  methods: {
    togglePlay() {
      // 通过 ref 或 uni.createVideoContext 控制视频播放/暂停
      const videoContext = uni.createVideoContext('myVideo'); // 需为 video 设置 id
      videoContext.play();
    }
  }
}
</script>

<style>
.custom-control {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
}
.title {
  color: white;
  margin-left: 8px;
  font-size: 14px;
}
</style>

注意事项

  1. 仅支持嵌套：cover-view 只能包含 cover-view、cover-image、button（基础库 2.16.0+ 支持）。
  2. 样式限制：不支持复杂 CSS（如 box-shadow、border-radius），需避免使用 opacity 等属性。
  3. 事件绑定：支持常用事件（如 @click），但手势事件可能受限。
  4. 层级问题：确保 cover-view 在 video 内部，否则无法覆盖。

适用场景

  • 自定义播放/暂停按钮
  • 添加水印或标题
  • 自定义进度条控件

通过合理使用 cover-view，可以增强 video 组件的交互性和视觉效果。

回到顶部