我允许我的用户将自己的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');