uniapp的video如何展示视频第一帧
在uniapp中使用video组件时,如何让视频加载后默认显示第一帧画面?目前视频初始状态是黑屏,需要点击播放按钮才能看到内容。想实现类似封面图的效果,但不想额外添加poster属性,希望直接截取视频首帧作为预览图。有没有内置方法或简单实现方案?
2 回复
在video标签中设置poster属性,值为第一帧图片的路径。若需自动获取第一帧,可用canvas绘制视频首帧作为封面图。
在 UniApp 中,可以通过设置 poster 属性来展示视频的第一帧或自定义封面图。以下是具体实现方法:
-
使用
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。
- 在
-
动态设置第一帧:
- 若需自动捕获第一帧,可通过
@loadedmetadata事件结合 Canvas 绘制实现(较复杂,需手动编码提取帧)。
- 若需自动捕获第一帧,可通过
注意事项:
poster仅支持静态图片,无法直接自动捕获视频第一帧。- 网络视频可能受跨域限制,建议提前处理封面图。
推荐提前准备封面图以确保兼容性和性能。

