2017.11.14) Youtube API를 활용한 커스텀 플레이어 part.1

2017. 11. 14. 16:28프로젝트(완료)/Youtube 커스텀 플레이어


플레이어 객체 생성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: youtubeId,
                playerVars: {
                    autoplay: 0,
                    controls: 0,
                    disablekb: 1,
                    showinfo: 1,
                    modestbranding: 0,
                },
                events: {
                    'onReady': onPlayerReady
                }
            });
cs

로딩 완료 되어 onReady가 호출되면 실행되는 함수

1
2
3
4
5
6
7
8
9
10
11
function onPlayerReady(event) {
            player.setVolume(0);
            var playButton = document.getElementById("play-button");
            playButton.addEventListener("click"function() {
                player.playVideo();
            });
            var pauseButton = document.getElementById("pause-button");
            pauseButton.addEventListener("click"function() {
                player.pauseVideo();
            });
        }
cs

간단하게 play , pause만 구현해보았다.