Hallo,

Via onderstaande code bestuur ik mijn playlist op mijn site, al dan niet via url.
Alles werkt totdat ik via een # een filmpje aanroep (dus de pagina herlaadt),
dan krijg ik deze error

Uncaught TypeError: undefined is not a function 

deze gaat over regel "'onStateChange': onPlayerStateChange".

Hoe komt dit en wat doe ik fout?

Groeten knipper.


				/*===youtube playlist===*/
					
					function onPlayerStateChange(event) {
						switch(event.data) {
							case YT.PlayerState.ENDED:
								$("#header_favicon").attr("href","main/icon/favicon/favicon.ico");
								//video is ten einde, triger volgende clip
								var ps = $("#playlist_herhaal").val();
								if(ps == 'alles') {
									var vidId_next = $('.playlist .active').next().attr('id');
									open_youtube(vidId_next);
								} else if(ps == 'dit') {
									var vidId_next = $('.playlist .active').attr('id');
									open_youtube(vidId_next);
								}
								break;
							case YT.PlayerState.PLAYING:
								$("#header_favicon").attr("href","main/icon/favicon/favicon_play.ico");
								break;
							case YT.PlayerState.PAUSED:
								$("#header_favicon").attr("href","main/icon/favicon/favicon_pause.ico");
								break;
							case YT.PlayerState.BUFFERING:
								$("#header_favicon").attr("href","main/icon/favicon/favicon.ico");
								break;
							case YT.PlayerState.CUED:
								$("#header_favicon").attr("href","main/icon/favicon/favicon.ico");
								break;
						}
					}
					
					/*Bedien youtube*/
					function open_youtube(vidId) {
						if(vidId != 'undefined') {
							window.location.hash = 'yt_' + vidId;
							$('#muziekplayer').html('<iframe id="player_'+vidId+'" width="100%" height="315" src="http://www.youtube.com/embed/' + vidId + '?enablejsapi=1&autoplay=1&autohide=1&showinfo=0" frameborder="0" allowfullscreen></iframe>');
							
							$('.playlist .muziek').removeClass('active');
							$('#' + vidId).addClass('active');
							
							new YT.Player('player_'+vidId, {
								events: {
								    'onStateChange': onPlayerStateChange
								}
							});
					
						} else {
							$('#muziekplayer').html('');
						}
						$('.playlist .muziek').removeClass('active');
						$('#' + vidId).addClass('active');
					}    
					
					/*Truger via knoppen in menu*/    
				        jQuery('.playlist .muziek').click(function() {				       
				            	var vidId = $(this).attr('id');
				            	open_youtube(vidId);	
				        });
					
					/*auto trigger via url #(hash)*/
					var hash = window.location.hash;
					var substr = hash.split('_');
					if(substr[0] == '#yt') {
						$('#' + substr[1]).click();
					}
Zo te zien geef je een event handler mee in geval een event wordt getriggered. In dat geval moet je dus hebben:

'onStateChange': onPlayerStateChange()
Nu is de error

Uncaught TypeError: Cannot read property 'data' of undefined 

Over lijn

4. switch(event.data) {
Je moet nog een object meegeven in die functie. Alleen welk object dat is..... geen idee.
Ik weet ook niet wat ik nu moet doen, ik heb deze code van de youtube documenten gehaald.
Weet iemand wat nu?
Vreemd, ik zie het niet.

Kan je de volledige code posten?

<script>
			$(document).ready(function(){
				/*===youtube playlist===*/
					
					function onPlayerStateChange(event) {
						switch(event.data) {
							case YT.PlayerState.ENDED:
								$("#header_favicon").attr("href","main/icon/favicon/favicon.ico");
								//video is ten einde, triger volgende clip
								var ps = $("#playlist_herhaal").val();
								if(ps == 'alles') {
									var vidId_next = $('.playlist .active').next().attr('id');
									open_youtube(vidId_next);
								} else if(ps == 'dit') {
									var vidId_next = $('.playlist .active').attr('id');
									open_youtube(vidId_next);
								}
								break;
							case YT.PlayerState.PLAYING:
								$("#header_favicon").attr("href","main/icon/favicon/favicon_play.ico");
								break;
							case YT.PlayerState.PAUSED:
								$("#header_favicon").attr("href","main/icon/favicon/favicon_pause.ico");
								break;
							case YT.PlayerState.BUFFERING:
								$("#header_favicon").attr("href","main/icon/favicon/favicon.ico");
								break;
							case YT.PlayerState.CUED:
								$("#header_favicon").attr("href","main/icon/favicon/favicon.ico");
								break;
						}
					}
					
					/*Bedien youtube*/
					function open_youtube(vidId) {
						if(vidId != 'undefined') {
							window.location.hash = 'yt_' + vidId;
							$('#muziekplayer').html('<iframe id="player_'+vidId+'" width="100%" height="315" src="http://www.youtube.com/embed/' + vidId + '?enablejsapi=1&autoplay=1&autohide=1&showinfo=0" frameborder="0" allowfullscreen></iframe>');
							
							$('.playlist .muziek').removeClass('active');
							$('#' + vidId).addClass('active');
							
							new YT.Player('player_'+vidId, {
								events: {
								    'onStateChange': onPlayerStateChange()
								}
							});
					
						} else {
							$('#muziekplayer').html('');
						}
						$('.playlist .muziek').removeClass('active');
						$('#' + vidId).addClass('active');
					}    
					
					/*Truger via knoppen in menu*/    
				        jQuery('.playlist .muziek').click(function() {				       
				            	var vidId = $(this).attr('id');
				            	open_youtube(vidId);	
				        });
					
					/*auto trigger via url #(hash)*/
					var hash = window.location.hash;
					var substr = hash.split('_');
					if(substr[0] == '#yt') {
						$('#' + substr[1]).click();
					}
				
			});
		</script>
Ja, okay, ik zie het probleem.

Je zal function onPlayerStateChange moeten verplaatsen; zorg dat die globaal staat, dus buiten $(document).ready()

Youtube probeert de functie aan te roepen, maar die bevindt zich buiten de scope waar Youtube aan kan.


En lijn 45 is sowieso zonder ()

'onStateChange': onPlayerStateChange
@Kris kan je daar een voorbeeld van geven? ik had die "()" er weer af gehaalt en de functie onder <script> gezet en dan kreeg ik weer die "undefined" error en met de haakjes weer de "data" error.
Volgens mij klopt het niet wat je zegt Kris. Toen hij het meegaf zonder haakjes kreeg hij de error:

Uncaught TypeError: undefined is not a function

Toen hij meegaf met haakjes kreeg hij

Uncaught TypeError: Cannot read property 'data' of undefined

Met andere woorden in eerste instantie werd de functie niet gevonden, in tweede instantie wel. Het probleem in de tweede is echter dat er nog een object meegegeven moet worden wat niet gedaan wordt (vandaar de error 'Cannot read propperty data of undefined'). Vraag is alleen welk object, of watvoor object. Het lijkt op een event handler en ik zou dan zeggen een event object, maar bij mijn weten hebben die geen data property. Wat dan wel?

Reageren