Video 태그

🎥 동영상 태그 삽입시 참고사항

- 📱 아이폰에서 동영상 사용시 전체화면으로 뜰 때

<video id="myVideo" autoplay muted loop playsinline>

video 요소에 playsinline 속성을 추가하면 전체화면 전환 없이 바로 재생이 됩니다. 아이폰에서 autoplay 속성을 사용하고자 할 때 playinline 속성을 같이 추가해야 화면 안에서 비디오가 바로 재생되는 상황을 만들 수 있습니다.

iframe 을 사용할 경우,

playsinline=1" frameborder="0" allowfullscreen 

- 📱 안드로이드에서 자동재생을 했는데도 동영상이 실행되지 않을 때

모바일에서 autoplay 속성을 넣어도 비디오파일에 오디오 트랙이 있으면 자동재생 기능이 동작하지 않습니다. 이때 muted 속성을 같이 넣어주면 자동재생이 가능하게 되는데, 이마저도 아이폰의 경우 비디오는 전체화면으로 재생되어야 하는 조건이 있어 자동재생이 되지 않습니다.

따라서 비디오 태그를 사용할 때는 모바일 환경을 고려하여

<video id="myVideo" autoplay muted loop playsinline>

를 필수로 추가해주는 것이 좋습니다!