js封装：
/*** 获取视频第一帧的方法，并将画面转换成 base64 格式* @param {String} url 视频的 URL，可以是 base64 格式* @return {Promise} 一个 Promise 对象，返回值为视频第一帧的 base64 数据*/
export function getVideoBase64(url) {return new Promise((resolve, reject) => {// 创建 video 元素const video = document.createElement('video');video.crossOrigin = 'anonymous'; // 设置跨域属性video.src = url; // 设置视频 URLvideo.preload = 'auto'; // 设置预加载方式为自动加载video.muted = true; // 静音，避免播放时发出声音video.autoplay = true; // 自动播放// 创建 canvas 元素const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');// 监听视频加载完成video.addEventListener('loadedmetadata', () => {// 获取视频的宽高const videoWidth = video.videoWidth;const videoHeight = video.videoHeight;// 设置 canvas 尺寸为视频的原始宽高canvas.width = videoWidth;canvas.height = videoHeight;// 确保视频的第一帧已经加载video.addEventListener('seeked', () => {// 将视频画面绘制到 canvas 中ctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 将 canvas 转换成 base64 格式的图片数据const dataURL = canvas.toDataURL('image/jpeg');resolve(dataURL);});// 手动触发视频跳转到第一帧video.currentTime = 0;// 在 iOS 上手动触发播放，以避免自动播放被阻止if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {// 可能需要手动触发播放来确保视频加载video.play().catch(err => {// 捕获播放失败的情况reject(new Error('视频播放失败：' + err.message));});}});// 监听错误事件video.addEventListener('error', (err) => {reject(new Error('视频加载失败：' + err.message));});});
}
使用：
import { getVideoBase64 } from '@/utils/videoCover.js';const res = await getVideoBase64('视频地址')
console.log(res);
