uni-app 获取本地视频时显示首帧或者获取到视频展示图

在uni-app中，获取本地视频的首帧或视频展示图通常涉及读取视频文件并提取其封面图像。这可以通过使用HTML5的Video元素和Canvas元素来实现。以下是一个示例代码，展示了如何在uni-app中获取本地视频的首帧图像并显示在页面上。

首先，确保你的项目已经配置好对本地文件的访问权限，并有一个视频文件路径。

1. 在页面的<template>部分，添加一个Video元素和一个Canvas元素，以及一个用于显示提取出的图像的元素：

<template>
  <view>
    <video
      id="video"
      src="/path/to/your/local/video.mp4"
      style="display: none;"
      @loadedmetadata="onVideoLoaded"
    ></video>
    <canvas canvas-id="canvas" style="display: none;"></canvas>
    <image :src="coverImage" mode="aspectFill"></image>
  </view>
</template>

1. 在页面的<script>部分，添加相应的JavaScript代码来处理视频加载和图像提取：

<script>
export default {
  data() {
    return {
      coverImage: '' // 用于存储提取出的图像数据
    };
  },
  methods: {
    onVideoLoaded() {
      const videoContext = uni.createVideoContext('video');
      videoContext.seek(0); // 确保视频在时间轴的开始位置
      videoContext.play();
      
      setTimeout(() => {
        const canvasContext = uni.createCanvasContext('canvas');
        canvasContext.drawImage('/path/to/your/local/video.mp4', 0, 0, 300, 300); // 根据需要调整宽高
        canvasContext.draw(false, () => {
          uni.canvasToTempFilePath({
            canvasId: 'canvas',
            success: (res) => {
              this.coverImage = res.tempFilePath; // 设置提取出的图像路径
            },
            fail: (err) => {
              console.error('Failed to extract cover image:', err);
            }
          });
        });
        
        videoContext.pause(); // 停止播放视频
      }, 100); // 等待视频加载首帧，这里使用了一个简单的延时，实际可能需要更精确的处理
    }
  }
};
</script>

1. 在页面的<style>部分，根据需要添加样式：

<style>
/* 添加你的样式 */
</style>

注意：

• 上述代码中的/path/to/your/local/video.mp4应替换为你的实际视频文件路径。
• 使用setTimeout等待视频加载首帧是一个简单的实现方式，但在实际项目中，你可能需要更精确的处理，例如监听timeupdate事件来确保视频已经加载到首帧。
• 由于uni-app在不同平台（如小程序、H5、App等）上的实现差异，某些API可能在不同平台上表现不同，请根据实际开发环境进行测试和调整。