💣문제점
포트폴리오 사이트를 구현하고 핸드폰으로 들어갔을때, PC화면에서는 자동재생되었던 화면이 모바일환경에서는 자동재생이 되지않는것을 확인하고 수정해야겠다고 생각이 들었다.
모바일화면에서 동영상부분을 지날때마다 화면이 눌리면서 큰화면으로 바뀌면서 화면보는데 방해가 되었다🥺
자동재생에 필요한 3가지 요소
- autoplay - 비디오가 페이지 로드 시 자동으로 재생하도록 설정
- muted - 비디오 음소거하고 있으므로 브라우저가 자동재생을 허용함
- playsinline - 모바일 환경에서 비디오를 인라인으로 재생
- PC브라우저, 안드로이드는 autoplay, muted속성만 추가해도 자동재생이 가능
- 아이폰은 IOS10이후부터 playsinline속성을 추가적용해야함
모바일환경에서 자동으로 비디오를 재생하기 위한 조건
-
비디오파일이 자동재생을 허용해야 한다.
→ 브라우저의 자동재생 정책에 따라 사용자 상호작용없이 자동재생이 차단될수 있음 (테이터사용량 줄이고 사용자 경험 향상시키기 위함) -
사용자 에이전트가 자동재생을 지원해야 한다.
→ 모바일 브라우저 중 일부는 자동재생을 지원x / 사용자 설정에 따라 자동재생 차단 -
비디오 요소에 autoplay속성을 추가해야 한다.
→ 비디오가 페이지로드시 자동으로 재생하도록 설정함 (모바일 브라우저에서 항상 자동재생이 보장되지는 않음)
참고사이트
https://blog.leehov.in/40
https://okayoon.tistory.com/entry/video%ED%83%9C%EA%B7%B8-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%9D%B4%EC%8A%88-%EC%A0%95%EB%A6%AC-%EC%82%AC%ED%95%AD
https://velog.io/@huhyj97/html-video-%ED%83%9C%EA%B7%B8-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%A0%84%EC%B2%B4%ED%99%94%EB%A9%B4-%EC%9D%B4%EC%8A%88feat.%EC%95%84%EC%9D%B4%ED%8F%B0
