uniapp的video如何设置默认显示视频里的某一帧

在uniapp中，如何让video组件默认显示视频的某一帧画面而不是黑屏？我尝试了设置poster属性，但它是用来显示封面图的，不是视频内的某一帧。有没有办法在视频加载前就指定显示比如第5秒的画面？

2 回复

在video组件中，使用poster属性设置默认封面图，但无法直接指定视频中的某一帧。若需显示视频中的某一帧，需先截取该帧并保存为图片，再将图片路径赋给poster。


在 UniApp 中，可以通过设置 video 组件的 poster 属性来指定视频封面图，使其默认显示视频的某一帧。如果希望动态显示视频中的某一帧，可以结合 canvas 截取视频帧作为封面。

方法一：使用 poster 属性（静态封面）

在 video 组件中直接设置 poster 属性为图片 URL，作为视频加载前的默认显示帧：

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

说明：

  • poster 需提前准备好静态图片，适用于固定封面场景。

方法二：动态截取视频帧作为封面

如果需动态截取视频的某一帧（如第一帧），可通过 canvas 实现：

  1. 隐藏播放视频并截取帧：
<template>
  <view>
    <!-- 隐藏的视频元素，用于加载和截取 -->
    <video 
      id="videoSource"
      src="/static/video.mp4" 
      @loadedmetadata="captureFrame"
      style="display: none;"
    ></video>
    <!-- 显示的视频播放器 -->
    <video 
      :poster="posterUrl" 
      src="/static/video.mp4" 
      controls
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      posterUrl: ''
    };
  },
  methods: {
    captureFrame() {
      const video = uni.createVideoContext('videoSource'); // 需在 video 组件设置 id="videoSource"
      const canvas = uni.createCanvasContext('frameCanvas'); // 创建画布
      
      // 视频元数据加载后，绘制第一帧到 canvas
      video.seek(0); // 定位到第0秒
      setTimeout(() => {
        canvas.drawImage(video, 0, 0, 300, 200); // 绘制视频帧到画布
        canvas.draw(false, () => {
          // 将画布内容转为临时图片
          uni.canvasToTempFilePath({
            canvasId: 'frameCanvas',
            success: (res) => {
              this.posterUrl = res.tempFilePath; // 设置为封面
            }
          });
        });
      }, 100); // 延迟确保视频帧就绪
    }
  }
};
</script>

注意：

  • 需在页面中添加一个 canvas 组件（设置 canvas-id="frameCanvas"）。
  • 通过 video.seek() 定位到指定时间点截取对应帧。
  • 此方法适用于需要动态生成封面的场景，但注意兼容性和性能。

总结

  • 简单场景：直接用 poster 设置静态图片。
  • 动态需求：结合 canvas 截取视频帧并生成封面。
    根据实际需求选择合适的方法。
回到顶部