크롬 Youtube 동영상, 비디오 자동재생이 안되는 문제

문제상황

유튜브 자동재생 배너를 만들면서 새로고침을 할 경우 자동재생이 되지 않는 문제가 있었습니다.

새로고침을 할경우 플레이어가 자동으로 재생되지 않고 일시정지로 문제가 되는 것을 확인하였습니다.

코드는 다음과 같습니다.

// 동영상 정보를 가져오는 Container

export function MovieBanner() {
  	// 현재 재생중인 배너의 영화 인덱스를 기억하고 있습니다.
    const [movieIndex, setMovieIndex] = useState(0)
    // 현재 상영중인 영화 정보를 불러옵니다.
    const { data: playListData } = useSuspenseQuery<ResponseData>({
        queryKey: ['movies', 'nowPlaying', 1],
        queryFn: () => getNowPlay(1)
    })
	
    // 불러온 영화정보를 토대로 동영상 정보를 불러옵니다.
    const movieList = useSuspenseQueries({
        queries: playListData.results.map(item => item.id).map(id => ({
            embed: !playListData,
            queryFn: () => getVideos(id),
            queryKey: ["movies", "video", id],
        }))
    })
	
    // 불러온 영화 정보 중 "Teaser" 영상의 주소만 배열로 모아둡니다.
    const keyList = movieList.reduce((acc: string[], item) => {
        const teaser = item.data.results.find(v => v.type === "Teaser");
        if (teaser) acc.push(teaser.key);
        return acc;
    }, []);
	
  	// 영화가 끝났을 때 다음 인덱스 번호로 변경해줍니다.
    const endMovie = () => {
        setMovieIndex(prev => prev + 1 > keyList.length - 1 ? 0 : prev + 1)
    }

    return (
        <div className={styles.container}>
            <div className={styles.blackCover}/>
            <div className={styles.movieCover}/>
            <YoutubePlayer endMovie={endMovie} videoId={keyList[movieIndex]}/>
        </div>
    )
}

// 전달받은 동영상을 재생하는 플레이어

import YouTube, { YouTubeProps } from "react-youtube";

export function YoutubePlayer({ videoId, endMovie }: Props) {
    const onPlayerReady: YouTubeProps['onReady'] = (event) => {
        event.target.playVideo();
    }

    const opts: YouTubeProps['opts'] = {
        height: '600px',
        width: '100%',
        playerVars: {
            allow: "autoplay; encrypted-media;",
            autoplay: 1,
            rel: 0,
            controls: 0,
            modestbranding: 1,
        },
    };

    return <YouTube videoId={videoId} onPause={(event) => event.target.playVideo()} opts={opts} onError={endMovie}
                    onEnd={endMovie} onReady={onPlayerReady}/>;
}

해결방법

자동 재생이 되지 않는 문제는 구글 크롬 브라우저 정책을 살펴볼 수 있습니다.

웹 브라우저는 사용자 환경을 개선하고, 광고 차단 프로그램 설치에 따른 인센티브를 최소화하며, 비용이 많이 들거나 제한된 네트워크의 데이터 소비를 줄이기 위해 더 엄격한 자동재생 정책으로 전환하고 있습니다. 이러한 변경사항은 사용자에게 재생을 더 효과적으로 제어하고 합법적인 사용 사례를 통해 게시자에게 혜택을 제공하기 위한 것입니다. 구글의 자동재생 정책

즉 쉽게 말한다면 이는 사용자 경험과 데이터 사용량을 고려한 조치라고 볼 수 있습니다.

대표적인 예시로

1. 동영상이 음소거 상태이여야한다.
2. 사용자가 동영상을 클릭(인터렉션)하여야 자동재생이된다.

이외에도 아이폰의 경우 저전력모드의 경우 자동재생이 중지되는 예외 상황도 있긴 하지만 대표적인 위 두 예시만 지키더라도 자동재생이 될 수 있습니다.

위 코드를 다시본다면react-youtube을 이용하였지만 음소거가 안되어 있기 때문에 새로고침을 할 경우 자동 재생이 되지 않는 것을 알 수 있습니다.

그러나 처음 시작을 할경우 onPlayerReady가 실행이 되면서 자동 재생이 되는 것 처럼 보이는 것이 였습니다.

때문에 자동 재생을 하고싶을 경우 정책에 맞게 음소거를 시켜주면 됩니다.

react-youtuble를 사용할 경우 아래와 같은 옵션을 통해 음소거를 시켜줄 수 있습니다.

const opts: YouTubeProps['opts'] = {
    height: '600px',
    width: '100%',
    playerVars: {
        allow: "autoplay; encrypted-media;",
        autoplay: 1,
        rel: 0,
        mute:1,
        controls: 0,
        modestbranding: 1,
    },
};

<video/> 태그를 사용하는 경우 다음과 같이 음소거를 할 수 있습니다.

<video autoplay muted>

이와 같이 에러가 아닌 정책에 맞게 코드를 수정하여 자동 재생이 되는 배너를 만들 수 있습니다.