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

在移动端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 微信实时共享位置修改
    • ¥100 TG的session协议号转成直登号号后客户端登录几分钟后自动退出设备
    • ¥30 共模反馈回路的小信号增益
    • ¥15 arduino ssd1306函数与tone函数放歌代码不兼容问题
    • ¥70 0.96版本hbase的row_key里含有双引号,无法deleteall
    • ¥20 Ida Pro增加插件出现问题
    • ¥15 诊断性META分析合并效能的检验
    • ¥15 请问abb根据色块判断奇偶数并根据批次号放入仓储
    • ¥66 开发PC客户端一定也要开发上位机吗?
    • ¥20 Java eclipse连接数据库