🦘비디오 자동재생 실행시키기

🐅 비디오 정책

크롬이나 사파리등 사용자의 액션없이 비디오를 자동재생 시킬 수는 없다. 다만 자동재생이 필요한 경우 음소거 처리하면 
 자동실행이 가능하다
 그러나 현재 서비스에서는 항상 자동재생을 원하였다. 다만 항상 자동재생을 할 수 없다고 전달하였고, 자동재생이 안될 경우 alert을 띄어주기로 하였다

 

🦬 자동재생 시도

여전히 사용자 액션없이는 자동재생이 거의불가능 하지만 시도 할 수 있는 방법이 존재한다. 3회에 걸쳐 강제로 play를 하는것이며,
안될경우 alert으로 사용자가 재생버튼을 누르도록 유도한다.

 

🐘 자동재생 시도 - script

일단 video retry를 Promise 형태로 return 한다.

 

/* promise retry video*/
		const videoPromiseRetry = (retryCount = 3) => {
			return new Promise((resolve, reject) => {
				const retry = (attempt = 0) => {
					const promise = video.play();
					promise
						.then(() => {
							resolve('videoPromiseRetry success')
						})
						.catch(error => {
							console.error("videoPromiseRetry error : ", error);
							if (attempt < retryCount) {
								console.error(`작업을 재시도 합니다. 남은 횟수 : ${retryCount - attempt}`);
								setTimeout(() => retry(attempt + 1), 1000)
							}
							else {
								const error = new Error('작업을 실패하였습니다.')
								error.name = 'FailRetry';
								reject(error)
							}

						})
				}

				retry(0)

			})
		}

 

그리고 video의 이벤트 중 "canplaythrough" 가 트리거가 된다면, 함수를 호출 하고 3회에 걸쳐 자동재생이 실패할 경우 catch부분에서 처리하도록 한다.

 

const videoAddEvent = () => {
	video.addEventListener("canplaythrough", eventHandle);
}

const eventHandle = (evt) => {
	const { type } = evt;
    
    switch (type) {
    	case 'canplaythrough':
        	videoPromiseRetry()
                .then(result => {
                    console.log("result :", result);
                    initialPlay = false;
                })
                .catch(err => {
                    if (err.name === 'FailRetry') {
                        alert("재생버튼을 클릭해주세요")
                    }
                    else {
                        alert("관리자에게 문의해주세요")
                    }
                    console.error("videoPromiseRetry error : ", err.name);
                })
        	break;
    	default:
			break;
    }
}