Safari autoplay시 영상 종료 후 볼륨 버튼을 눌렀을 때 재생되는 이슈

이슈 발생

• Safari에서 <video>의 autoplay 속성을 사용하여 무음으로 자동 재생시에, 영상 종료 후 볼륨 버튼을 누르면 영상이 재생이 되는 이슈가 있었다.

테스트

• 재생 완료후에 video.muted값이 변경되면 재생 된다.
• 볼륨 버튼을 눌러 변경하는 경우와 video.muted 값을 변경하는 경우 둘 다 동일했다.

해결

• autoplay 속성을 제거하고 JS로 강제 재생하는 것으로 해결하였다.

아래에 테스트한 코드와 재현 영상을 첨부한다.

See the Pen Safari autoplay issue by arori (@arori) on CodePen.