본문 바로가기
  • 커뮤니티
  • 북마크
Front-end/HTML

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

by 빽짱구 2022. 11. 29.
반응형

아이폰에서 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%}
반응형

댓글0[댓글정책]