2

ユーザーが自分のYouTube動画を自分のプロフィールに追加できるようにしています。

プロセスの一環として、ユーザーがクロムレスプレーヤーの外側にあるボタンからビデオを視聴/一時停止できるようにしています。

onStateChnageイベント内で再生\一時停止を実行しています。現在の状態を認識し、それに応じて新しい状態を設定し、同時に再生\一時停止ボタンのアイコンを変更しています。

デバッガーを実行しようとしたとき、このvbugの原因は、特定の場合にstateChangeイベントが複数回発生することであることに驚きました。

それを防ぐ方法はありますか?、よろしくお願いします、O。

私のコード:

window['eventListener_'+settings.safeID] = function(status){

            var interval;
            if(status == 1){
            $('#togglePlayer').html('<i class="icon-pause"></i>');
                        elements.container.hasClass('playing');
                        // if(!$('div [classname^="flashContainer"]').hasClass('playing')){
                        //  $('div [classname^="flashContainer"]').addClass('playing');
                        //  $('div [classname^="controlDiv"]').removeClass('pause').addClass('play');
                        // }
            }   
            else if(status == 0 || status == 2){
            $('#togglePlayer').html('<i class="icon-play"></i>');

            // if($('div [classname^="flashContainer"]').hasClass('playing')){
            //  $('div [classname^="flashContainer"]').removeClass('playing');
            //  $('div [classname^="controlDiv"]').removeClass('play replay').addClass('pause');
            // }
        }
            // if(status == YT.PlayerState.PAUSED || status == YT.PlayerState.ENDED){
            //  console.log('22');
            // }
            if(status==-1)  // video is loaded
            {
            $('#togglePlayer').show();
            $('#togglePlayer').html('<i class="icon-play"></i>');
                if(!initialized)
                {
                    // Listen for a click on the control button:



                    $('#togglePlayer').click(function(){

                        // If the video is not currently playing, start it:
                        if(!elements.container.hasClass('playing')){                                
                            //regualar case
                            try{
                                elements.control.removeClass('play replay').addClass('pause');
                                elements.container.addClass('playing');
                                elements.player.playVideo();
                            }
                            catch(e){ // first time, elements don't have binding yet
                                document.getElementById('video_'+$playerID).playVideo();
                                if(!$('div [classname^="flashContainer"]').hasClass('playing')){
                                    $('div [classname^="flashContainer"]').addClass('playing');
                                }
                                $('div [classname^="controlDiv"]').removeClass('play replay').addClass('pause');

                            }
                        } else { // video is playing, pause it
                            //regular case
                            try{
                                elements.control.removeClass('pause').addClass('play');
                                elements.container.removeClass('playing');
                                elements.player.pauseVideo();
                            }
                            catch(e){
                                document.getElementById('video_'+$playerID).pauseVideo();
                                                if($('div [classname^="flashContainer"]').hasClass('playing')){
                                                    $('div [classname^="flashContainer"]').removeClass('playing');  
                                                }
                                                $('div [classname^="controlDiv"]').removeClass('pause').addClass('play');
                            }                           

                        }
                    });

                    initialized = true;

                }
                else{
                    // This will happen if the user has clicked on the
                    // YouTube logo and has been redirected to youtube.com

                    if(elements.container.hasClass('playing'))
                    {
                        elements.control.click();
                    }
                }
            }

            if(status==0){ // video has ended
                elements.control.removeClass('pause').addClass('replay');
                elements.container.removeClass('playing');
            }
        }

        // This global function is called when the player is loaded.
        // It is shared by all the videos on the page:

        if(!window.onYouTubePlayerReady)
        {

            window.onYouTubePlayerReady = function(playerID){
                $playerID =  playerID;
                $firsLoad = true;
                document.getElementById('video_'+playerID).addEventListener('onStateChange','eventListener_'+playerID);
                // document.getElementById('video_'+playerID).player.addEventListener('onStateChange', function(){alert('1515')});

            }
        }

    },'jsonp');
4

0 に答える 0