[React] 배경화면 동영상/사진 - Safari 자동재생 안됨, Chrome 구분하여 자동재생 작동하기 구현

동아리 웹사이트를 만들면서 Home 화면 배경화면 동영상이
Safari에서는 자동 재생이 안된다는 사실을 알게 되었다..

 

알고 보니 사파리는 사용자 경험을 향상시키기 위해 자동 재생 정책을 가지고 있는데, 광과민성 발작을 일으킬 수 있는 영상, 음란물, 폭력, 혐오, 공포가 포함된 영상 등이 자동 재생되어 원치 않게 보게되는 문제를 방지하기 위해 화면이 딱 켜졌을 때에 대한 자동 재생을 막아두었다. 그래서 사용자의 스크롤 컨트롤이 생기면 자동 재생이 되는 기능을 넣자고 하기도 했지만..ㅎㅎ

 

그래서 우리는 Safari일 때와 Chorme일때의 환경을 JS로 읽어와
서로 다른 인터렉션을 보여주기로 결정하였다.

• 사용자 에이전트(userAgent) 문자열 읽어오기
  -> 사용자 에이전트 문자열을 읽어오기 위해 UseEffect를 통해 화면이 로딩되었을 때 .test()함수에 userAgent 값을 넣어 bool 값을 받아왔다.
  * 사용자 에이전트(userAgent) : 웹 브라우저가 서버에게 자신의 신분과 기술적인 성능에 대한 정보를 전달하기 위해 사용하는 문자열이다. 이 문자열은 브라우저 또는 기기의 종류, 버전, 운영 체제 등을 식별하는 데 사용된다. 하지만 사용자에 따라 문자열이 유연하게 바뀔 수 있음으로 큰 프로젝트에서는 추천하지 않는다.
  

  const [isSafari, setIsSafari] = useState(false); // 사파리인지 아닌지 구분

  useEffect(() => {
    const userAgent = window.navigator.userAgent; // 사용자 에이전트 변수 설정
    const isSafariBrowser = /^((?!chrome|android).)*safari/i.test(userAgent); // test() 함수 실행
    setIsSafari(isSafariBrowser);
  }, []);

• isSafari 값을 활용하여 배경화면 사진과 동영상 출력 구분하기
  Safari 화면일 떄는 과감하게 배경 동영상의 일부 사진을 배경화면으로 설정하였다. 
  만약 기획자를 설득해야할 때가 온다면 아래 링크의 Naver 웹사이트를 보여주며 네이버도 해결 못했다고 말해라는 걸 추천한다..ㅎㅎ
  https://1784.navercorp.com

<>
        <VideoContainer isColor={backcolor} isFixed={isFixed}>
          {isSafari ? (
            <VideoBackgroundImg
              src={require("../../../assets/img/BackgroundImg_Web.png")}
            />
          ) : (
            <VideoBackground autoPlay loop muted playsInline>
              <source
                playsInline
                muted
                autoPlay
                src={require("../../../assets/Video/BackGroundVideo.mp4")}
                type="video/mp4"
              />
            </VideoBackground>
          )}
</>

1784 THE TESTBED 혁신을 현실로.