uniapp 如何获取视频第一帧

在uniapp中，如何获取视频的第一帧作为封面图？我试过使用canvas绘制，但效果不太理想，有没有更简单的方法或者现成的插件可以实现这个功能？最好能兼容H5和小程序平台。

2 回复

使用uni.createVideoContext获取视频上下文，然后调用capture方法截图即可获取第一帧。

示例代码：

const video = uni.createVideoContext('myVideo')
video.seek(0) // 定位到第0秒
setTimeout(() => {
  video.capture((res) => {
    console.log(res.tempImagePath) // 第一帧图片路径
  })
}, 500)

在 UniApp 中，获取视频第一帧可以通过以下步骤实现，主要依赖 <video> 组件的 @loadedmetadata 事件和 Canvas 绘制。以下是详细方法和示例代码：

实现步骤：

  1. 使用 <video> 组件：加载视频并监听元数据加载完成事件。
  2. 绘制到 Canvas：在事件回调中，将视频当前帧（默认为第一帧）绘制到 Canvas 上。
  3. 导出图像：从 Canvas 导出 base64 格式的图片数据。

示例代码：

在 Vue 页面的模板和方法中实现：

<template>
  <view>
    <!-- 隐藏的视频组件，用于加载视频 -->
    <video 
      id="myVideo"
      src="/static/sample.mp4" 
      @loadedmetadata="getFirstFrame"
      style="display: none;"
    ></video>
    <!-- 用于绘制帧的 Canvas -->
    <canvas 
      id="myCanvas" 
      canvas-id="myCanvas" 
      style="width: 300px; height: 200px;"
    ></canvas>
    <!-- 显示提取的第一帧 -->
    <image :src="firstFrame" mode="widthFix" v-if="firstFrame" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      firstFrame: '' // 存储第一帧图片 base64 数据
    };
  },
  methods: {
    getFirstFrame() {
      // 获取视频和 Canvas 上下文
      const video = uni.createVideoContext('myVideo');
      const canvas = uni.createCanvasContext('myCanvas');
      
      // 视频元数据加载后，绘制第一帧
      setTimeout(() => {
        // 将视频当前帧绘制到 Canvas
        canvas.drawImage('/static/sample.mp4', 0, 0, 300, 200); // 调整尺寸为 Canvas 大小
        canvas.draw(false, () => {
          // 从 Canvas 导出临时图片路径
          uni.canvasToTempFilePath({
            canvasId: 'myCanvas',
            success: (res) => {
              this.firstFrame = res.tempFilePath; // 保存第一帧图片路径
            },
            fail: (err) => {
              console.error('导出图片失败:', err);
            }
          });
        });
      }, 100); // 短暂延迟确保视频帧可绘制
    }
  }
};
</script>

注意事项：

  • 视频路径：确保 src 使用有效视频路径（本地或网络 URL）。
  • Canvas 尺寸：调整 drawImage 和 Canvas 的宽高以匹配视频比例，避免拉伸。
  • 平台差异：在部分安卓设备上可能需要更长的延迟（如 200ms）来确保绘制成功。
  • 性能：处理大视频时可能影响加载速度，建议在必要时使用。

通过以上方法，即可在 UniApp 中提取视频第一帧并显示。如果遇到问题，检查视频格式支持（如 MP4）和路径是否正确。

回到顶部