获取视频第一帧兼容ios

小政爱学习！2025-03-07 11:46

js封装：

javascript 复制代码

/**
 * 获取视频第一帧的方法，并将画面转换成 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; // 设置视频 URL
    video.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));
    });
  });
}

使用：

javascript 复制代码

import { getVideoBase64 } from '@/utils/videoCover.js';

const res = await getVideoBase64('视频地址')
console.log(res);