325. (TWOK/ERROR) [JavaScript] NotAllowedError: play() failed because the user didn't interact ..

---

[환경 설정 및 설명]

​

프로그램 : Web / Chrome

​

설 명 : [JavaScript] NotAllowedError: play() failed because the user didn't interact ..

 

---

[설 명]

​

--------------------------------------------------------------------------
[개발 및 테스트 환경]
--------------------------------------------------------------------------

- 제목 : [JavaScript] NotAllowedError: play() failed because the user didn't interact ..


- 테스트 환경 : PC / Web / Chrome

--------------------------------------------------------------------------





--------------------------------------------------------------------------
[에러 원인]
--------------------------------------------------------------------------

1. video 태그 autoplay 자동 재생 설정 후 video.play(); 호출 시 자동 재생 (autoplay) 정책을 만족하지 못해 video.play() 실행이 차단 당하는 이슈


2. 브라우저가 video.play()를 허용하는 조건 :

  >> 사용자가 문서와 상호 작용 한 후 (예: 클릭, 터치)

  >> 음소거된 영상일 경우 (video.muted = true 코드 설정)


3. 에러 발생 로그 전문 : 

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

--------------------------------------------------------------------------





--------------------------------------------------------------------------
[해결 방법]
--------------------------------------------------------------------------

1. 자바스크립트에서 video.play(); 를 호출 하기 전에 document.getElementById 로 비디오 태그 지정 후 muted 옵션 값 지정 수행


2. 소스 코드 예시 : 

	const video = document.getElementById('video');
	video.muted = true; // 음소거 설정
	video.autoplay = true; // 자동 재생 허용

	video.play().catch(function(error) {
	console.error("Autoplay play() blocked:", error);
	});

--------------------------------------------------------------------------





--------------------------------------------------------------------------
[참고 사이트]
--------------------------------------------------------------------------

[video source 태그 사용해 비디오 동영상 재생 실시]

https://blog.naver.com/kkh0977/222376368934?trackingCode=blog_bloghome_searchlist


[자바스크립트 video 비디오 태그에 재생 중 인 stream 스트림 을 캔버스 화면 녹화로 저장 실시 - canvas record]

https://blog.naver.com/kkh0977/223250767269?trackingCode=blog_bloghome_searchlist

--------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://blog.naver.com/kkh0977/223250767269?trackingCode=blog_bloghome_searchlist

336. (javaScript) 자바스크립트 video 비디오 태그에 재생 중 인 stream 스트림 을 캔버스 화면 녹화로

---