ユーザーが自分の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');