[HTML] 크롬 & 사파리 Video

웹사이트를 개발하다보면 video 와 관련된 문제를 경험하게 된다.

자동 재생이나, video 태그의 재생 전 아이콘이 나오는 문제를 나는 경험했다.

이미 흔한 해결 방법들이지만 이번에 한 번 정리해보겠다.

크롬과 사파리 등 브라우저에서 video를 자동 재생 시키려면 제약사항이 있다.

바로 muted라는 옵션이 필요하다.

음소거 상태에서만 동영상을 자동 재생시킬 수 있다.

또한 사파리의 경우에는 추가적으로 playsinline 옵션을 줘야한다.

playsinline 속성을 사용하지 않으면 전체화면으로 처리된다는 문제가 있다.

<html> 
  // ...
  
  <body>
    <video src="" muted playsinline autoplay loop />
  </body>
</html>

다음과 같이 사용하려면 기본적으로 muted, playsinline, autoplay를 사용해야

브라우저 구분없이 자동재생이 가능하다.

다른 브라우저에서는 문제없지만 아이폰의 카카오 브라우저에서 자동재생을 실행하면

재생 전 실행 아이콘 등이 나온다.

기능상으로는 문제없지만 그래도 사용자가 보는 입장에서 재생 아이콘이 노출된다면 괜히 홈페이지의

완성도를 의심할 수 있다고 생각한다.

이것은 아주 간단하게 해결이 가능한데, video의 poster를 설정해주면 된다.

썸네일을 설정하면 자동재생 선 아이콘이 나오는 것이 아닌 썸네일이 대신 나오고 자동 재생이 된다.

<html> 
  // ...
  
  <body>
    <video src="" muted playsinline autoplay loop poster="" />
  </body>
</html>

다음과 같은 설정으로 video를 사용할 때 브라우저에서 문제를 해결할 수 있다.

티스토리툴바