javascript

유투브 api이용한 시청 완료 처리

질주하는구 2016. 11. 11. 16:07

유투브 동영상을 플레이 하고 나서 특정한 작업을 하게 해야 하는 경우 

아래와 같이 player_api를 통해서 스크립트로 제어가 가능 합니다.


<script src="http://www.youtube.com/player_api"></script>

<script type="text/javascript">

    var player;

    function onYouTubePlayerAPIReady() {

        try {

            player = new YT.Player('movieViewDiv', {

                height: '500',

                width: '750',

                videoId: 'movieUrl',

                playerVars: {

                    'autoplay': 0,  

                    'controls': 0,   

                    'autohide': 0,  

                    'rel': 0,          

                    'wmode': 'transparent'

                },

                events: {

                    'onReady': onPlayerReady,

                    'onStateChange': onPlayerStateChange

                }

            });

        } catch (e) {

        }

    }

    function onPlayerReady(event) {

    //유튜브 플레이어가 다 만들어지면 호출됨

    }

    function onPlayerStateChange(event) {

        if (event.data === 0) {

        if(confirm("시청이 완료되었습니다.\n화면아래 다음 버튼을 클릭하시면 이동하시겠습니까?")==true){

location.href="";

        }else{

$("#nexBtnDiv").show();

        }

        }

    }

</script>


해당 스크립트는 동영상이 모두 플레이 되고 나서 다음 버튼이 출력 되고 해당 버튼이 선택 되면 페이지 이동을 하는 소스로 이외에도 events를 통해서 플레이어의 동작 상태에 대한 제어가 가능 하게 되어 있습니다.

반응형