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

이번엔 플레이어와 음소거를 구현해보았다.

플레이어는 단순하게 input 태그의 seeksilder을 사용함.

마우스 클릭중에 움직이면 미 버퍼링 상태로 동영상 탐색

마우스 클릭이 떼지면 마지막 수치를 반영하여 버퍼링을 하게 구현하였다.

            var seeksliderprog = document.getElementById("seeksliderprog");
            seeksliderprog.value = 0;
            seeksliderprog.max = player.getDuration();
            seeksliderprog.addEventListener('mousemove', function() {
                if (playerclick) {
                    player.seekTo(seeksliderprog.value, false)
                    console.log("time : " + seeksliderprog.value)
                }
            });
            seeksliderprog.addEventListener('mousedown', function() {
                playerclick = true;
            });
            seeksliderprog.addEventListener('mouseup', function() {
                playerclick = false;
                player.seekTo(seeksliderprog.value, true)
            });
 
            setInterval(updatePlayer, 250)
        }
        function updatePlayer() {
            if (player && player.getDuration) {
                if (!playerclick)
                    seeksliderprog.value = player.getCurrentTime();
            }
        }

음소거는 유튜브 자체에서 잘 구현해놔서 바로 끌어다 쓰기만 함

var mute = document.getElementById("mute");
            mute.addEventListener("click", function() {
                if (player.isMuted()) {
                    player.unMute()
                    mute.value = "음소거";
                } else {
                    player.mute()
                    mute.value = "소리켜기";
                }
            });