iOS Safari에서 동영상 썸네일 미노출 문제 해결

iOS Safari에서 동영상 썸네일 나오지 않음.(안드로이드는 나옴)

모바일의 safari 에서 video tag를 사용할때 영상이 미리 로드되지 않아 썸네일이 보이지 않게 되었습니다.

preload=”metadata” 옵션을 video tag에 주어도 적용이 안되었는데, 찾아보니 src 경로에 #t=0.001을 추가하여 해결할 수 있었습니다.

#t 를 통해 동영상의 초를 건너뛸 수 있었는데 0.001을 넣음으로 0.001초를 건너뛰어 해당 이미지를 썸네일로 보여주게 되었습니다.

"#t=30"을 추가하면 비디오가 30초에서 시작됩니다. 또한, "#t=2m30s"와 같이 분과 초를 혼합하여 지정할 수도 있습니다. 이러한 기능은 특정 부분에서 비디오를 시작하거나 링크를 공유할 때 유용할 수 있습니다.

알고보니 위의 사항은 모바일이 아닌 데스크탑 사파리의 해결책이였습니다.

mobile에서는 동영상을 preload 않았고 그래서 autoplay를 true로 하고 loadedmetadata 시점에 pause를 걸어버렸습니다.

참고로 모든 환경에서 video 재생 ui를 통일시키고 편하게 관리하기 위해 미디어 재생 플레이어 라이브러리인 video.js 를 사용하였습니다.