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