[js] Youtube-API kent eigen object niet

[Duncank]

Ik ben met behulp van de Youtube-Api bezig een eigen Youtube player te bouwen, maar loop hiermee tegen enkele puntjes aan.

Wanneer de video is afgelopen geeft deze een playerStateChange door van '0' (ended). Op dit commando wil ik een scherm weergeven met opties voor onder andere "opnieuw afspelen".

Wanneer ik op opnieuw afspelen klik wordt de volgende functie uitgevoerd, de ingevulde 'val' door de link is '0' (0 seconden, dus begin van de video).

function playTime(val){
ytplayer.seekTo(val); // zoek seconde 0
if(window.playerStat != 1){ // als de player niet aan het afspelen is
ytplayer.playVideo(); // speel af
}
}

Dan krijg ik echter de volgende foutmelding in Chrome's element-inspecteren-console:
"/test/player/js/frontend.js:110 Uncaught TypeError: Object #<an HTMLObjectElement> has no method 'seekTo'" waarbij regel 110 de "ytplayer.seekTo(val)" bevat.

Wanneer ik de seekTo waarde weghaal en direct ytplayer.playVideo() uitvoer, krijg ik dezelfde error, maar dan met playVideo.


// Voor diegene die de hele code wil zien: http://projectfive.nl/test/player, daar draait de hele boel.

[ Voor 6% gewijzigd door Duncank op 20-09-2010 16:58 ]

[Gamebuster]

Waarschijnlijk is het ID van je HTML element "ytplayer" en daarom wordt de variable "ytplayer" vervangen door het HTML element object.

Verander de ID van je HTML element of verander de naam van je variable.

[Duncank]

Dat is inderdaad het geval. Bij alles waar 'ytplayer' voorstond (als in 'ytplayer.playVideo();') linktte 'ytplayer' naar getElementById('ytplayer') en het video-object had dus dat ID.

Nu heb ik het ID van het video-object en de vermelding in de getElementById aangepast naar 'youtubeplayer', de functie blijft dus bijvoorbeeld: ytplayer.playVideo().

Dit lost echter niets op, de error blijft gelijk.

//Edit,
dit probleem is nu opgelost. Het probleem zat in het feit dat ik het video-object .hide() als de video is afgelopen en .show() als ie weer opnieuw moet beginnen. Toen ik dit weghaalde werkte het zoals bedoeld. Raar eigelijk, want hierbij wordt er niets uit de DOM gehaald.

[ Voor 26% gewijzigd door Duncank op 20-09-2010 19:12 . Reden: oplossing ]

[Duncank]

Ik zit echter nog met 1 probleem. In de player wil ik full-screen simuleren (omdat het alleen het volledige browservenster opvult, niet het hele scherm).

Hiervoor append ik de div waarin het object zit in een overlay-div en geef ik de player door middel van ytplayer.height en ytplayer.width zijn nieuwe maten mee. De resize lukt, maar op een of andere manier werken alle commando's die op de player betrekking hebben (alles met ytplayer.functie()) hierna niet meer.

Vermoedelijk gebeurd dit dus omdat het object verplaatst wordt (door de AppendTo). Ik weet echter geen andere mogelijkheid om dit voor elkaar te krijgen.

[pieturp]

Gevolg is dat je twee objecten met hetzelfde ID creëert; dat mag volgens de specs niet, en je browser zal (zeer waarschijnlijk) gewoon het eerste object referencen, niet de tweede die je append.
Je kunt dan ófwel het ID van het tweede element aanpassen, ofwel het eerste weggooien.

[Duncank]

Volgens mij klopt dat niet helemaal, bij het appenden wordt de div verplaatst, dit zie ik ook zo terugkomen in de broncode van de website.

Wanneer ik een tweede zou willen maken en deze appenden zou ik .clone().append() moeten gebruiken.
Dat is tenminste hoe ik het begrepen heb.

[pieturp]

My bad. Wordt inderdaad netjes verplaatst...

[Duncank]

Ik had dit project even naast me neer gelegd maar heb het nu weer opgepakt en ben een heel stuk verder gekomen. In Chrome werkt alles nu zoals ik wil, maar in Firefox (eerstvolgende-testbrowser), stopt alles met werken zodra ik full-screen open. Vanaf dat moment herkent hij de functies niet meer.

Bij het maken van fullscreen append ik de video-player aan een overlay-div. Waarschijnlijk breekt hier de connectie met het object in Firefox. Ik heb echter geen idee hoe dit dan wel kan werken in Chrome, en hoe ik kan zorgen dat het overal werkt.

Preview & code is te vinden op http://www.projectfive.nl/test/player/index.php

Edit, ik heb het opgelost. Voordat de player in fullscreen gaat verwijder ik hem van de pagina, waarbij ik de speel-positie onthoud. Ik voeg de player opnieuw toe aan de pagina, in full-screen-afmetingen in de overlay-div en laat hem spelen vanaf de onthouden tijd. Voor verkleinen doe ik dit andersom.

[ Voor 19% gewijzigd door Duncank op 05-10-2010 11:28 . Reden: opgelost ]