uniapp的video如何展示视频第一帧

在uniapp中使用video组件时,如何让视频加载后默认显示第一帧画面?目前视频初始状态是黑屏,需要点击播放按钮才能看到内容。想实现类似封面图的效果,但不想额外添加poster属性,希望直接截取视频首帧作为预览图。有没有内置方法或简单实现方案?

2 回复

在video标签中设置poster属性,值为第一帧图片的路径。若需自动获取第一帧,可用canvas绘制视频首帧作为封面图。


在 UniApp 中,可以通过设置 poster 属性来展示视频的第一帧或自定义封面图。以下是具体实现方法:

  1. 使用 poster 属性

    • <video> 组件中添加 poster 属性,值为图片路径(支持本地或网络图片)。
    • 示例代码:
      <template>
        <view>
          <video 
            src="https://example.com/your-video.mp4" 
            poster="https://example.com/poster-image.jpg" 
            controls
          ></video>
        </view>
      </template>
      
    • 如果希望显示视频的第一帧,需提前提取第一帧作为图片并设置为 poster
  2. 动态设置第一帧

    • 若需自动捕获第一帧,可通过 @loadedmetadata 事件结合 Canvas 绘制实现(较复杂,需手动编码提取帧)。

注意事项

  • poster 仅支持静态图片,无法直接自动捕获视频第一帧。
  • 网络视频可能受跨域限制,建议提前处理封面图。

推荐提前准备封面图以确保兼容性和性能。

回到顶部