Ende eines YouTube Videos per JavaScript feststellen

chpa

Erfahrenes Mitglied
Hallo liebe Forengemeinde,

eine Frage: Kann man per JavaScript oder auf eine andere Art und Weise feststellen, ob ein YouTube Video zu Ende ist?

Danke!

Christoph
 
CPoly,

vielen Dank für Deine Hilfe, die hat mich schon sehr viel weitergebracht.

Jetzt steh ich aber vor einem Problem.

Ich möchte immer, wenn sich der Status des Players ändert ein Alert ausgeben lassen. Aber irgendwie tut sich nichts. Kann mir jemand helfen?

Code:
<script type="text/javascript">
			function onYouTubePlayerReady() {
				alert("geht");
				ytplayer = document.getElementById("ytplayer");
				ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
			}

			function onytplayerStateChange(newState) {
				alert("Player's new state: " + newState);
			}
		</script>
	</head>
	<body>
		<center>
		<div id="dasvideo">
			<object width="640" height="390"><param name="movie" value="http://www.youtube.com/e/p5TkxjxsnwY?enablejsapi=1&version=3&playerapiid=ytplayer"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/e/p5TkxjxsnwY?enablejsapi=1&version=3&playerapiid=ytplayer" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>
		</div>

Das ist nur ein Ausschnitt, da ich denke, dass ich etwas mit der playid falsch mache oder?
 
Zuletzt bearbeitet:
Ich sehe in deinem HTML kein Element mit der ID "ytplayer". So funktioniert es:

Javascript:
ytplayer = document.getElementsByTagName("embed")[0];
 
Langsam wird es echt peinlich :)

Hab jetzt den Code wie folgt abgeändert:

Code:
<script type='text/javascript' src='http://www.karriere-online-test.de/swfobject/swfobject.js'></script>
		<script type="text/javascript">
			function onYouTubePlayerReady() {
				alert("geht");
				ytplayer = document.getElementsByTagName("embed")[0];
				ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
			}

			function onytplayerStateChange(newState) {
				alert("Player's new state: " + newState);
			}
		</script>
	</head>
	<body>
		<center>
		<div id="dasvideo">
			<object width="640" height="390"><param name="movie" value="http://www.youtube.com/e/p5TkxjxsnwY?enablejsapi=1&version=3&playerapiid=ytplayer"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/e/p5TkxjxsnwY?enablejsapi=1&version=3&playerapiid=ytplayer" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>
		</div>

Aber es geht immer noch nicht...

Also mein Ziel ist es, dass wenn das Video zu Ende ist, das Video über display:none; ausgeblendet wird und dafür ein Bild angezeigt wird. Deshalb wollte ich jetzt erstmal erreichen, dass ich die StatusMeldungen ausgegeben bekomme...

Kannst Du mir evtl. nochmal weiterhelfen?

DANKE!
 
Bekommst du denn das "alert("geht");" oder noch nichtmal das?

Also falls die onYouTubePlayerReady-Funktion erst gar nicht aufgerufen wird, dann könnte das daran liegen:

Note: To test any of these calls, you must have your file running on a webserver, as the Flash player restricts calls between local files and the internet.

Also du kannst die HTML Datei nicht einfach im Browser anzeigen, sondern Sie muss über einen Webserver angezeigt werden (ich hab z.B. lokal Apache laufen). Das muss dir aber nicht peinlich sein, hab das selbst gestern zuerst nicht bedacht.

Also das funktioniert bei mir (habe nur das alert ersetzt, weil es nervt)

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>YouTube API</title>
	
	<script type="text/javascript">
		function onYouTubePlayerReady() {
			ytplayer = document.getElementsByTagName("embed")[0];
			ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
		}
		
		function onytplayerStateChange(newState) {
			document.title = "Player's new state: " + newState;
		}
	</script>
</head>

<body>
	<div id="dasvideo">
		<object width="640" height="390"><param name="movie" value="http://www.youtube.com/e/p5TkxjxsnwY?enablejsapi=1&version=3&playerapiid=ytplayer"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/e/p5TkxjxsnwY?enablejsapi=1&version=3&playerapiid=ytplayer" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>
	</div>
</body>

</html>
 
Zurück