iOS 환경에서 Video Resource Load 실패하던 문제

🩹 증상

Failed to load resource: The operation couldn’t be completed. (WebKitBlobResource error 1.)

⭕️ 원인

• 첫 프레임을 썸네일로 사용하기 위해 src 주소를 `blob:${url}#t=0.001`처럼 주었고 해당 url로부터 데이터를 가져오지 못함
• 다른 환경에서는 잘 동작하나 iOS 환경에서는 blob URL과 함께 time Anchor를 사용할 경우 동작하지 않음.
• 결국 브라우저입장에서는 이상한 URL로 요청하던 것

🤔 문제 및 해결 과정

• 해당 경로에서 Parameter를 제거해 주었으나 재생 전까지 까만 화면으로 표시되며, Custom Player도 비활성화되어있다.
• Native Controller나 autoplay를 사용하지 않으면 아예 비디오 재생 불가
  • Capture 기능이 필요해 Custom Player를 만들어줬기 때문에 Native Controller만 사용하는 방법도 불가능

💡 해결

• https://stackoverflow.com/questions/68478912/ios-can-read-media-fragments-with-blob
  해당 답변 참고하여 metadata가 load 됐을 때 video의 현재시간을 0.001만큼 옮겨주는 것으로 해결.
  video tag에는 preload=”metadata” 속성을 주어 파일 업로드 시 해당 이벤트가 발생되도록 하였다.

...
const handleThumbnail = () => {
  const node = videoRef.current;
  if (node) {
    node.currentTime = 0.001;
  }
}

if (node) {
  node.addEventListener('loadedmetadata', handleThumbnail);
  return () => {
    node.removeEventListener('loadedmetadata', handleThumbnail);
  };
}

return <video ref={videoRef} ... />

📝 참고

• iOS(Webkit)에서 비디오를 전체화면이 아닌 상태에서 재생하고 싶을 때는 playsinline property를 주어야 한다. 해당 프로퍼티 없이 재생 시 자동으로 전체화면이 되어버린다…