동영상배경화면2 [React] 배경화면 동영상/사진 - Safari 자동재생 안됨, Chrome 구분하여 자동재생 작동하기 구현 동아리 웹사이트를 만들면서 Home 화면 배경화면 동영상이 Safari에서는 자동 재생이 안된다는 사실을 알게 되었다.. 알고 보니 사파리는 사용자 경험을 향상시키기 위해 자동 재생 정책을 가지고 있는데, 광과민성 발작을 일으킬 수 있는 영상, 음란물, 폭력, 혐오, 공포가 포함된 영상 등이 자동 재생되어 원치 않게 보게되는 문제를 방지하기 위해 화면이 딱 켜졌을 때에 대한 자동 재생을 막아두었다. 그래서 사용자의 스크롤 컨트롤이 생기면 자동 재생이 되는 기능을 넣자고 하기도 했지만..ㅎㅎ 그래서 우리는 Safari일 때와 Chorme일때의 환경을 JS로 읽어와 서로 다른 인터렉션을 보여주기로 결정하였다. 사용자 에이전트(userAgent) 문자열 읽어오기 -> 사용자 에이전트 문자열을 읽어오기 위해 U.. 2023. 7. 7. [React] 배경화면 동영상 스크롤 제어 기능 코드 리뷰 PARD 동아리 웹사이트를 만들면서 웹사이트 HomePage에 처음 딱 들어왔을 때 동영상으로 이루어진 배경화면을 스크롤 제어를 통해 마치 스크롤에 따른 애니메이션 기능을 구현하고자 아래와 같은 코드를 짜봤다. GSAP(GreenSock Animation Platform)라는 라이브러리를 통해 웹 애니메이션을 구현하고자 하였다. gsap.to(window, {}) 를 통해 동영상의 재생과 정지를 스크롤에 따라 제어하였으며, window.pageYOffset; 를 활용하여 현재 스크롤 위치 정보를 저장하였다. videoPRogress를 계산하여 스크롤 값에 따라 비디오의 정지 포인트를 관리하였다. 아래는 내가 기능 구현을 위해 짜보았던 코드이다. import React, { useRef, useEffect.. 2023. 6. 7. 이전 1 다음
