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

Question

在移动端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 事件 但截出来的也是黑色的

我想要达到的结果：用户上传视频后 能够正常截取视频的第一帧 当做视频的封面；

Answer 1

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