js中ios 截取视频第一帧黑屏 视频无法播放

这可能是因为在 iOS 中，视频需要在用户交互的情况下才能自动播放，否则会被视为自动播放而被阻止。如果你在获取视频第一帧时，视频还没有被用户交互过，那么就会出现黑屏的情况，而且视频也无法播放。

为了解决这个问题，你需要在用户交互的情况下先播放一段视频，然后再获取视频的第一帧。以下是一个修改后的示例代码：

function captureFirstFrameFromVideo(videoUrl, callback) {
  const video = document.createElement('video');
  video.crossOrigin = 'anonymous';
  video.src = videoUrl;
  video.onloadedmetadata = function() {
    // 先播放视频
    video.play().then(() => {
      const canvas = document.createElement('canvas');
      canvas.width = this.videoWidth;
      canvas.height = this.videoHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(this, 0, 0);
      const imgData = canvas.toDataURL('image/png');
      callback(imgData);
      // 获取完第一帧后暂停视频
      video.pause();
      video.currentTime = 0;
    }).catch((error) => {
      console.log(error);
    });
  };
}

在这个函数中，我们在 `onloadedmetadata` 回调函数中，创建了一个 `video` 元素，并将其设置为 `videoUrl`。然后，我们在 `play` 方法中播放视频，并在播放成功后获取视频的第一帧。获取完第一帧后，我们暂停视频，并将视频的当前播放时间设置为 0。这样做可以确保视频不会自动播放，同时也不会影响到其他地方对于视频的播放控制。