[Error] DOMException: play() failed because the user didn't interact with the document first 해결 방법

https://angelplayer.tistory.com/494

이전에 백그라운드 영상을 자동으로 출력하는 방법에 대해서 알아보았습니다.

 

 

 

// App.jsx
import video1 from '/video_test1.mp4'; // 1080p
import video2 from '/video_test2.mp4'; // 1440p
import video3 from '/video_test3.mp4'; // sound

function App() {
    return (
        <>
            {/* mute 제거 */}
            <video autoPlay loop>
                <source src={video3} type='video/mp4' />
            </video>
            <div className='content'>
                <h1>AngelPlayer`s Viedo Test!!!</h1>
                <button>버튼도 나온다!!</button>
            </div>
        </>
    );
}

export default App;

영상이 자동으로 백그라운드로 실행되는 것은 확인하였으니, 이제 소리가 있는 영상을 적용하려고 muted를 제거하였습니다.

 

 

 

DOMException: play() failed because the user didn't interact with the document first

muted를 제거하면 위와 같은 에러가 발생하면서 영상이 멈추고 재생이 제대로 되지 않는 현상이 발생하였습니다.

 

 

 

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

Autoplay policy in Chrome - Chrome for Developers

조금 찾아보니 크롬 정책 상 막혀있는 문제라고 합니다.

 

 

간단히 요약하자면,

 

1) AutoPlay는 사용할 수 없다.

2) 다만 소리를 muted하는 경우에는 AutoPlay를 적용할 수 있다.

 

라고 합니다.

 

 

 

만약 AutoPlay를 하면서 소리가 나도록 하는 방법은

 

1) iframe을 이용한다.

2) User의 허용(반응)을 받는다.

3) 정책을 변경한다. (모든 유저가 브라우저 정책을 변경해야 하기 때문에 사실상 불가능)

4) React, Vue 등을 사용 시 PWA나 앱 설치 등으로 접근한다.

 

등이 있는데 저는 2번을 통해서 적용하도록 하겠습니다.

(1번의 적용방법은 위 링크에 명시되어 있습니다.)

 

 

 

구현 코드

// App.jsx
import { useEffect, useRef, useState } from 'react';
import video1 from '/video_test1.mp4'; // 1080p
import video2 from '/video_test2.mp4'; // 1440p
import video3 from '/video_test3.mp4'; // sound

function App() {
    const videoRef = useRef(null);
    const [isOpen, setIsOpen] = useState(false);
    const [isMuted, setIsMuted] = useState(true); // 비디오 음소거 상태

    // 모달 열기
    const openModal = () => {
        setIsOpen(true);
        // 모달이 열릴 때, 다른 스크립트를 일시정지하거나 제어 가능
    };

    // 모달 닫기
    const closeModal = () => {
        setIsOpen(false);
        // 모달이 닫힐 때, 다른 스크립트를 다시 활성화 가능
    };

    useEffect(() => {
        openModal();
    }, []);

    // 소리 허용 버튼을 클릭했을 때 실행
    const toggleMute = () => {
        const videoElement = videoRef.current;
        videoElement.muted = !isMuted; // 비디오 음소거 상태를 반전시킴
        setIsMuted(!isMuted); // 상태 업데이트
        closeModal();
    };

    return (
        <>
            <video autoPlay muted={isMuted} ref={videoRef} loop>
                <source src={video3} type='video/mp4' />
            </video>
            <div className='content'>
                <h1>AngelPlayer`s Viedo Test!!!</h1>
                {/* 화면 처음 들어오면 자동으로 켜지는 모달 */}
                {isOpen && (
                    <div className='modal' style={{ backgroundColor: 'white' }}>
                        <div className='modal-content'>
                            {/* 모달 닫기 버튼 */}
                            {/* <span className='close' onClick={closeModal}>
                                &times;
                            </span> */}
                            <button onClick={toggleMute}>{isMuted ? '소리 허용' : '소리가 허용되었습니다.'}</button>
                            <p></p>
                            <p>소리켜기를 누르면 자동으로 모달이 닫힙니다</p>
                        </div>
                    </div>
                )}
            </div>
        </>
    );
}

export default App;

저는 화면이 뜨자마자 모달을 띄우고, 모달에서 버튼을 클릭하면 소리가 나는 형태로 구현하였습니다.

 

 

 

화면을 처음 띄우면 자동으로 모달이 나오게 됩니다.

 

 

 

모달 내부에 있는 버튼을 클릭하면 자동으로 모달이 사라지면서 소리가 재생됩니다.

 

 

 

// 소리 허용 버튼을 클릭했을 때 실행
const toggleMute = () => {
    const videoElement = videoRef.current;
    videoElement.play();
    videoElement.muted = !isMuted; // 비디오 음소거 상태를 반전시킴
    setIsMuted(!isMuted); // 상태 업데이트
    closeModal();
};

return (
    <>
        <video muted={isMuted} ref={videoRef} loop>
            <source src={video3} type='video/mp4' />
        </video>
        // ...
    </>
);

만약 소리가 처음부터 나도록 만들고 싶다면 autoPlay를 제거하고, onClick이 되었을 때 영상을 출력하도록 구현하면 됩니다.

 

 

 

 

Sourse

https://github.com/ssh5212/react-self-test/tree/video-autoplay

GitHub - ssh5212/react-self-test

 

 

Reference

공식 문서

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

 

내가 시도한 것들과 유사한 것들을 시도한 블로그
https://kangdanne.tistory.com/219