[HTML]ios(아이폰)에서 video 태그로 mp4 영상 삽입시 재생안될때 해결방법

아이폰에서 mp4 영상을 바로 호출하면 재생이 되나, video 태그로 삽입시 재생이 안되는 문제입니다.

먼저 video 태그의 속성을 살펴봅시다.

<video autoplay playsinline>

 

아이폰에서 autoplay 실행시 playsinline 를 추가하면 전체화면 전환없이 바로 재생이 됩니다.

즉 autoplay 를 넣을경우 playsinline 를 같이 넣어줘야한다는 의미입니다. 그래야 아이폰에서 영상이 제대로 보여집니다.

 

autoplay : 자동재생

playsinline : IOS 자동재생

 

그리고 자동재생을 하기 위해서는 muted(음소거) 도 같이 넣어줘야합니다.

<video autoplay muted playsinline>

 예제)

<video loop autoplay muted playsinline>
  <source src="video.mp4" type="video/mp4" />
</video>

영상이 안보일시 포스터도 넣어보세요.

<video poster="영상썸네일" loop autoplay muted playsinline>
  <source src="video.mp4" type="video/mp4" />
</video>

 

썸네일 사이즈가 맞지 않는다면 CSS에 poster 사이즈를 100%로 줍니다.

video[poster]{width:100%}