[자바스크립트] Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD 오류 해결 방법

Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

 

위와 같은 자바스크립트 오류가 뜰 때 해결 방법

 

 

 

에러 메시지인 NotAllowedError: play() failed because the user didn't interact with the document first는 브라우저가 사용자 상호작용 없이 비디오를 자동 재생하는 것을 허용하지 않기 때문에 발생합니다. 특히 Chrome과 같은 최신 브라우저들은 이러한 정책을 강제하고 있어, 사용자가 직접 상호작용(예: 클릭 등)을 하기 전에는 video.play() 메서드가 작동하지 않습니다.

이를 해결하려면, 비디오 자동 재생이 필요한 경우 다음 방법들을 고려해볼 수 있습니다.

 

1. 사용자 상호작용 후 재생

사용자가 페이지에서 클릭 등의 상호작용을 한 이후에만 비디오가 재생되도록 수정합니다. 예를 들어, 첫 클릭 시 재생할 수 있도록 이벤트 리스너를 추가하는 방법이 있습니다.

document.addEventListener("click", () => { video01.play(); }, { once: true });

 

이렇게 하면 페이지 로드 후 첫 클릭에 video01이 재생되며, 그 이후에 video01.play()가 문제 없이 실행됩니다.

2. 뮤트 상태에서 비디오 재생

일부 브라우저는 음소거된 상태에서 비디오를 자동 재생할 수 있습니다. 아래와 같이 video01 요소의 muted 속성을 설정해보세요.

video01.muted = true; video01.play();

3. autoplay 속성 활용

HTML에서 autoplay 속성을 직접 설정해 비디오를 자동 재생할 수도 있습니다.

단, 브라우저 설정에 따라 무음 상태에서만 재생이 가능할 수 있습니다.

<video id="video01" autoplay muted> <source src="your-video.mp4" type="video/mp4"> </video>

 

이러한 방식들을 통해 사용자 상호작용 없이 비디오를 재생할 수 있도록 설정하거나, 상호작용이 발생한 후에만 재생되도록 보완할 수 있습니다.