통합검색

Javascript

Youtube iframe API 기본 샘플 코드 (일시정지, 화질설정)

  • 2022.04.13 11:19:35


Youtube의 iframe API를 통해 동영상을 제어하는 기본 샘플 코드.

문서 상단에 Javascript SDK를 포함 시킨다.
 
<script async src="https://www.youtube.com/iframe_api"></script>    

아래와 같이 기본 코드를 작성한다.
아래 예시에서는 onReady, onStateChange 예시 코드를 함께 포함 시켰다.
 
<script>
//동영상 로드
function onYouTubeIframeAPIReady(vid) {
    var player;
    player = new YT.Player('muteYouTubeVideoPlayer', {
            videoId: vid, // YouTube Video ID
            width: 1100, // Player width (in px)
            height: 610, // Player height (in px)
            playerVars: {
                    autoplay: 0, // Auto-play the video on load
                    controls: 0, // Show pause/play buttons in player
                    showinfo: 0, // Hide the video title
                    modestbranding: 0, // Hide the Youtube Logo
                    loop: 1, // Run the video in a loop
                    fs: 0, // Hide the full screen button
                    cc_load_policy: 0, // Hide closed captions
                    iv_load_policy: 3, // Hide the Video Annotations
                    autohide: 0, // Hide video controls when playing
                    rel: 0 

            },
            events: {
                    onReady: function(e) {
                        //e.target.setVolume(5);
                    },
                    onStateChange : function(e){
                        if(e.data==0){
                            console.log('state Change!');
                        }
                    }
            }
    });
}
</script>

위와 같이 생성된 player 객체에 다양한 Method를 통해 동영상을 제어할 수 있다.
예시는 아래와 같다.
 
[일시정지]
player.pauseVideo();
[화질설정]
player.setPlaybackQuality('highres');