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