uniapp video 如何设置封面

在uniapp中，使用video组件时如何设置视频封面？我尝试了poster属性但没生效，请问正确的设置方法是什么？需要指定本地路径还是网络URL？

2 回复

在<video>标签中添加poster属性，设置封面图路径即可。例如：

<video poster="/static/cover.jpg"></video>

注意：封面图路径需为本地或网络有效地址。


在 UniApp 中，为 <video> 组件设置封面可以通过 poster 属性实现。poster 用于指定视频播放前显示的封面图片，支持本地路径或网络 URL。

使用方法：

  1. 基本设置：在 <video> 组件中添加 poster 属性，值为图片路径。
  2. 图片路径：可以是本地静态资源（如 /static/cover.jpg）或远程 URL（如 https://example.com/cover.jpg）。

示例代码：

<template>
  <view>
    <video 
      src="/static/video.mp4" 
      poster="/static/cover.jpg" 
      controls 
    ></video>
  </view>
</template>

注意事项：

  • 图片格式：支持常见格式（如 JPG、PNG）。
  • 路径问题：本地图片需放在 static 目录下，并使用绝对路径（以 / 开头）。
  • 加载失败：若图片加载失败，可能显示默认灰色背景，建议确保路径正确。

完整示例（含网络图片）：

<template>
  <view>
    <video 
      src="https://example.com/video.mp4" 
      poster="https://example.com/cover.jpg" 
      controls 
    ></video>
  </view>
</template>

通过以上方法即可轻松为视频设置封面。

回到顶部