vue videojs使用canvas截取视频画面

前言
刚开始做的时候太多坑,导致一直报错:
Uncaught (in promise) TypeError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)’.

直接上代码!!!

1、html

<el-button class="capture-item" type="primary" @click="captureScreenshot">截图</el-button>

<video id="viewer" class="video-js vjs-default-skin" crossorigin="anonymous" controls>
      <source :src="playVideo.url" type='video/mp4'>
</video>

2、js

/** 初始化视频播放器 */
    const initViewer = async () => {
      await nextTick() // 等待 DOM 更新

      // 初始化 video.js
      player.value = videojs('viewer', {
        controls: true,
        autoplay: true,
        fluid: true,
      });
    }
    
// 截图功能
    const captureScreenshot = () => {
      if (!player.value) return;

      const videoElement = player.value.el().querySelector('video');
      if (!videoElement) return;

      // 创建 Canvas
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      // 设置 Canvas 尺寸(可排除控制条)
      const controlHeight = 30; // 控制条高度
      canvas.width = videoElement.videoWidth;
      canvas.height = videoElement.videoHeight - controlHeight;

      // 绘制当前帧
      ctx.drawImage(
        videoElement,
        0, 0,
        videoElement.videoWidth, videoElement.videoHeight - controlHeight, // 源尺寸
        0, 0,
        canvas.width, canvas.height // 目标尺寸
      );

      // 转换为 DataURL
      const dataUrl = canvas.toDataURL('image/png');

      downloadImage(dataUrl);
    };

    // 下载图片
    const downloadImage = (dataUrl: string) => {
      const link = document.createElement('a');
      link.download = `视频截图_${new Date()}.png`;
      link.href = dataUrl;
      link.click();
    };

我这里是截取完画面下载到浏览器!

3、图例

点击《截图》,直接下载
在这里插入图片描述
截取的画面:
在这里插入图片描述

Vue3VideoPlayer是一个基于Vue.js 3.x的视频播放组件,它通常用于在网页上嵌入控制视频播放。如果需要从视频截取封面(即视频的第一帧或静止画面),这个过程通常不在该组件内部完成,因为这涉及到HTML5 Video API、Canvas 或者第三方库如FFmpeg等。 以下是一个简单的步骤概述: 1. 首先,你需要在视频播放完成后获取第一帧。你可以监听`onCanPlay`或`onPlay`事件,当视频可以播放时,暂停视频。 ```javascript this.$refs.videoPlayer.on('canplay', () => { this.$refs.videoPlayer.pause(); // 这里可以设置一个定时器,给视频一点时间缓冲然后截图 setTimeout(() => { this.getVideoCover(); }, 1000); }); ``` 2. 使用HTML5 Video API创建一个canvas元素,并将视频画布复制到canvas上: ```javascript async getVideoCover() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const video = this.$refs.videoPlayer.el; canvas.width = video.videoWidth; canvas.height = video.videoHeight; ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const coverDataURL = canvas.toDataURL(); // ...后续处理coverDataURL,例如将其赋值给组件的一个属性或保存到服务器 } ``` 3. 如果你想更精细地控制封面的质量或者裁剪,可以使用第三方库如`sharp`(Node.js)或前端的`html2canvas`来处理canvas。 请注意,截取封面可能涉及版权问题,确保在合法范围内操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叫我OldFe

一分也是鼓励!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值