[html] <video> 태그 자동 재생

웹 브라우저에서 video를 자동재생하려면 autoplay 속성이 있어야 한다.

그래서 가볍게 autoplay와 controls 속성만 줬는데,

<video src="/test.mp4" autoplay controls width="500px"></video>

보이는 것 같이 자동재생이 되지 않는다.. //왜 될까..?💦

 

이게 무슨 문제인고 하니,

Chrome에서 사용자들이 원치않는 리소스를 받지않도록 2018년 4월부터 다음과 같이 자동재생 정책이 바뀌었다고 한다.

• 음소거 된 자동재생 허용
• 다음과 같은 경우, 소리와 함께 자동재생 허용
  • 사용자가 도메인과 클릭, 탭 등의 상호작용
  • 사용자가 이전에 소리와 함께 비디오를 재생한 적이 있음(미디어 참여지수가 높음)
  • 사용자가 모바일의 홈 화면에 사이트를 추가했거나 데스크톱에 PWA를 설치함
• 자동 재생 권한을 iframe에 위임하여 소리와 함께 자동 재생 허용

정책이 바뀌면서, muted와 autoplay를 함께 사용하는 방법을 권장하고 있다.

 

(Edge나 웨일에서도 안되는 것 같다.)

https://developer.chrome.com/blog/autoplay/

Autoplay policy in Chrome - Chrome Developers

 

그래서 다음과 같이 바꿔주면, 제대로 자동재생되는 것을 확인할 수 있다.

<video src="/test.mp4" autoplay controls width="500px"></video>

---

이렇게 해두고 잊고있었는데 iphone을 사용하던 담당자1..

핸드폰에서 동영상이 자동재생되지 않는다고 해서 확인해봤더니

Safari에서는 자동재생이 되지 않는다.

 

찾아보니, Safari에서 비디오가 재생될 때 전체화면을 막아주는 playsinline 속성을 추가해주면 Safari에서도 제대로 동작한다.

 

결국 자동재생을 하려면

autoplay, muted, playsinline 속성 세가지가 모두 있어야 한다.