video 태그에서 썸네일이 나오지 않는 증상 (feat. 아이폰(ios) 계열에서만)

<video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

자 위와 같이 video 태그를 선언하였는데... 

다른 곳에서는 다 이미지가 잘 나오는데.  아이폰에서만 나오지 않는다? 그 이유는..

답은 바로 video 태그에서 poster 속성에 있다.

 

데스크탑, 안드로이드에서 Edge, Chrome, Safari, Opera 등 모두 확인해보았고,

iMAC의 Chrome, Safari에서도 잘보이는 부분을 확인하였다.

하지만, 아이폰의 기본브라우저(Safari)에서만 보이지 않는다.

 

기본적으로 poster 속성이 없으면 브라우저에서 동영상의 첫 프레임의 화면을 썸네일로 사용한다. 

하지만, Safari가 문법에 매우 엄격한 편이라서 안나오는 경우가 있을 것이라고 판단하였다. 

일반적인 데스크탑에서 Safari에서는 테스트를 해봤자, Chrome 엔진 기반이기 때문에 소용이 없다. 

그래서 iMac의 Safari에서 테스트를 하였는데.. 왜 잘 보이지... (아시는 분..)

 

일단, 아래와 같이 poster 속성을 적용해주면, 아이폰에서도 잘 보인다. 

<video controls poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

 

하지만, 속성을 적용하였더라도 해상도가 너무 크면 보이지 않는 문제가 있다..

 

아이폰에서 적용에 어려움들이 종종 있는 듯 하다.

예를 들자면, autoplay 속성도 아이폰에서는 저전력모드일 때 지원하지 않는 문제와 같은...

 

 

아~ 잡스형 아이폰이 왜이래~~