C_心欲无痕 2022-11-10 14:47 采纳率: 70%
浏览 487
已结题

在移动端IOS上获取video视频的第一帧为黑屏

在移动端IOS上获取video视频的第一帧为黑屏 ;代码如下:
/**
 * 获取视频的第一帧 来当做封面
 * @param url 是该文件的base64格式  返回值也是base64格式 可以直接使用
 */
export function getVideoBase64(url) {
  return new Promise(function (resolve, reject) {
      let dataURL = '';  // 最终得到的第一帧图片
      let width = '90';   // 截取图片的宽度 单位是px
      let height = '90'; // 截取图片的高度 单位是px
      let listen = 'loadeddata';  // 监听的是loadeddata事件

      let video = document.createElement('video');
      let canvas = document.createElement('canvas');

      video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
      video.setAttribute('src', url);
      video.setAttribute('width', width);
      video.setAttribute('height', height);
      video.currentTime = 1; // 第一帧
      video.preload = 'auto'; //metadata:抓取原数据

       //判断是否是IOS设备        监听 durationchange或progress 在ios也会出现黑屏 
      if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
        video.load();  // 重新加载视频 解决在ios设备中 不会默认加载视频或音频资源的问题
        video.autoplay = true; // 设置自动播放
        video.muted = true;  // 静音
        listen = 'loadeddata'; // 当前帧的数据已加载 时触发
      }
      video.addEventListener(listen, () => {
        console.log('监听到了listen:', listen);
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d').drawImage(video, 0, 0, width, height); //绘制canvas
        dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
        resolve(dataURL);
      });
  });
}
运行结果及报错内容 : 在ios上面截出来的是黑色的
我的解答思路和尝试过的方法 :我尝试监听durationchange或progress 事件 但截出来的也是黑色的
我想要达到的结果:用户上传视频后 能够正常截取视频的第一帧 当做视频的封面;
  • 写回答

1条回答 默认 最新

  • love. 2022-11-10 15:05
    关注

    有个功能:获取视频的第一个有效帧。你搜下

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 11月25日
  • 已采纳回答 11月17日
  • 创建了问题 11月10日

悬赏问题

  • ¥15 帮我解决一下膳食平衡的线性规划模型的数据实例
  • ¥40 万年历缺少农历,需要和阳历同时显示
  • ¥250 雷电模拟器内存穿透、寻基址和特征码的教学
  • ¥200 比特币ord程序wallet_constructor.rs文件支持一次性铸造1000个代币,并将它们分配到40个UTXO上(每个UTXO上分配25个代币),并设置找零地址
  • ¥15 关于Java的学习问题
  • ¥15 如何使用chatgpt完成文本分类任务?
  • ¥15 已知速度v关于位置s的等式,怎么转化为已知位置求速度v的等式
  • ¥15 我有个餐饮系统,用wampserver把环境配置好了,但是后端的网页却进去,是为什么,能不能帮远程一下?
  • ¥15 R运行没有名称为"species"的插槽对于此对象类"SDMmodelCV"
  • ¥20 基于决策树的数字信号处理,2ask 2psk 2fsk的代码,检查下报错的原因