当前位置: 首页 > news >正文

获取视频第一帧兼容ios

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; // 设置视频 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));
    });
  });
}

使用:

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

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

 

http://www.dtcms.com/a/53152.html

相关文章:

  • 数据库复习(第五版)- 第八章 存储过程
  • Docker save命令怎么用
  • 大型WLAN组网部署(Large scale WLAN network deployment)
  • PDF转JPG(并去除多余的白边)
  • Linux开启命令审计功能记录用户的每一步操作
  • python基础课程整理--元组的基础
  • 期望、方差和协方差
  • 【VTK】三种面切片数据 加载模型 scalars设置颜色透明度 加载raw 医学数据
  • QT——线程
  • SQL_语法
  • 逐行拆解 C 语言:数据类型、变量
  • 【初探数据结构】线性表——链表(二)带头双向循环链表(详解与实现)
  • MySQL 架构、索引优化、DDL解析、死锁排查
  • 在ubuntu20.4中如何创建一个虚拟环境(亲测有效)
  • ubuntu20.04已安装 11.6版本 cuda,现需要通过源码编译方式安装使用 cuda 加速的 ffmpeg 步骤
  • 有效的括号(栈)
  • 【论文阅读笔记】ALSS-YOLO | 无人机(UAVs)、热红外(TIR)、野生动物探测、小目标、轻量级探测器
  • 【Node.js入门笔记1---初始Node.js)】
  • 笔记:代码随想录算法训练营day37:完全背包、518. 零钱兑换 II、377. 组合总和 Ⅳ、70. 爬楼梯 (进阶)
  • Python--网络编程(下)
  • GPTQ - 生成式预训练 Transformer 的精确训练后压缩
  • C++编程指南23 - 在无关线程之间共享资源时应使用shared_ptr
  • IntelliJ IDEA 华为云远程开发配置步骤
  • 通用文件模型
  • Axure设计之数据列表动态列设置/列筛选案例
  • 设计模式Python版 状态模式
  • 开发者社区测试报告(功能测试+性能测试)
  • 尚硅谷爬虫note14
  • ZooKeeper 基本概述
  • 意向锁的目的