Re: Fragethread: Musik- und Videoeinbindung - Teil 2
[Re: UnknownSubject]
- #2170477 - 31.01.2011, 18:22:11
|
~ United ~
Registriert: 04.06.2008
Beiträge: 1.471
Ort: Schwabenland
|
Hier nochmal ein etwas ausführlicheres Tutorial, um Musik von youtube auf der Homepage einzubinden und die "YouTube JavaScript Player API" zu benutzen. In diesem Fall wird das "Video" ein wenig anders eingebunden, nämlich als "SWFObject". Dafür ist es nötig, dass eine externe Bibliothek mit eingebunden wird.
Ein Beispiel für einen einfachen Player, mit dem man Musik pausieren und fortsetzen kann:
<!-- Player --> <div id="ytapiplayer">You will need Flash 8 or better to view this content.</div>
<a href="javascript:void(0);" onclick="ytplayer.playVideo();">Play</a> <a href="javascript:void(0);" onclick="ytplayer.pauseVideo();">Pause</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript"> var params = { allowScriptAccess: "always" }; var atts = { id: "ytplayer1" };
swfobject.embedSWF("http://www.youtube-nocookie.com/v/nNT0fQnZBOw?enablejsapi=1&autoplay=1", "ytapiplayer", "0", "0", "8", null, null, params, atts);
ytplayer = document.getElementById('ytplayer1'); </script> <!-- Ende Player -->
Das eingebundene Video ersetzt das <div> mit der entsprechenden id (ytapiplayer). Da wir aber nur Musik wollen, wird die Größe des Videos ganz einfach auf 0 gesetzt. Schwarz hervorgehoben ist hierbei die Video-ID von youtube. Diese kann beliebig eingesetzt werden. Mittels "enablejsapi=1" und "autoplay=1" wird festgelegt, dass das Video direkt startet und die API auch verfügbar ist.
****************************************
Da die "YouTube JavaScript Player API" einiges zu bieten hat, kann man sich auch eine Playlist anlegen und diese Abspielen lassen. Hier ein einfaches Beispiel dazu:
<!-- Player --> <div id="ytapiplayer">You will need Flash 8 or better to view this content.</div>
<a href="javascript:void(0);" onclick="ytplayer.playVideo();">Play</a> <a href="javascript:void(0);" onclick="ytplayer.pauseVideo();">Pause</a> <a href="javascript:void(0);" onclick="next();">Next</a>
<span id="track"> -- </span>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript"> var songs=[ ["nNT0fQnZBOw","Alle meine Entchen"] , ["H2KkPKogX4Y","Häschen in der Grube"] , ["s5bVQcpSrUE","Ein Männlein steht im Walde"] ];
var startVideoID = songs[0][0]; var nr = 0; var params = { allowScriptAccess: "always" }; var atts = { id: "ytplayer1" };
swfobject.embedSWF("http://www.youtube-nocookie.com/v/"+startVideoID+"?enablejsapi=1&autoplay=1", "ytapiplayer", "0", "0", "8", null, null, params,atts);
function onYouTubePlayerReady(){ window.setInterval("updatePlayerInfo()", 250); }
function updatePlayerInfo(){ ytplayer = document.getElementById('ytplayer1'); updateHTML("track", songs[nr][1]); if(ytplayer.getPlayerState() == 0){ next(); } }
function next(){ if(nr < songs.length-1){ nr++; ytplayer.loadVideoById(songs[nr][0]); } }
function updateHTML(elmId, value){ document.getElementById(elmId).innerHTML = value; }
</script> <!-- Ende Player -->
In diesem Beispiel wird ein Array angelegt, in dem jeweils die Video-ID und der Liedname stehen. Als Startsong wird einfach der erste des Arrays genommen. Für diesen Fall bedarf es auch noch zusätzlicher Funktionen. Mit "setInterval" wird eine Zeit festgelegt, nach der der Player, bzw. die verknüpften Anzeigen, immer wieder aktualisiert wird (1000 = 1 Sek). Der Liedname wird in diesem Fall beim <span> jeweils eingetragen (ersetzt den alten Wert) und ändert sich bei einer Liedänderung automatisch. Möchte man ein Lied überspringen, hilft "Next"
Es gibt noch einige Anwendungsmöglicheiten mit Hilfe der API. Ein Bsp dafür ist auf meiner HP einzusehen. Sollte Bedarf bestehn, führ ich hier noch ein paar Möglichkeiten an.
_________________________ Es gibt genau 10 Arten von Menschen. Die, die binär verstehen, und die, die es nicht verstehen.
|
[zum Seitenanfang]
|
|
|
Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
02.12.2009, 13:58:16
|
Musik auf Homepage
|
Anonym
|
23.01.2010, 12:06:37
|
Re: Musik auf Homepage
|
Anonym
|
23.01.2010, 14:55:21
|
Hintergrundmusik ausschalten
|
Anonym
|
24.01.2010, 13:37:30
|
Re: Hintergrundmusik ausschalten
|
Anonym
|
24.01.2010, 15:26:20
|
Re: Hintergrundmusik ausschalten
|
Anonym
|
24.01.2010, 15:30:33
|
Re: Hintergrundmusik ausschalten
|
Anonym
|
24.01.2010, 15:37:36
|
Re: Hintergrundmusik ausschalten
|
Anonym
|
24.01.2010, 15:41:56
|
Re: Hintergrundmusik ausschalten
|
lutz39
|
24.01.2010, 16:51:20
|
Re: Hintergrundmusik ausschalten
|
Anonym
|
27.01.2010, 10:12:35
|
Re: Hintergrundmusik ausschalten
|
Anonym
|
27.01.2010, 15:26:55
|
Re: Hintergrundmusik ausschalten
|
Anonym
|
27.01.2010, 16:56:51
|
Re: Hintergrundmusik ausschalten
|
Anonym
|
28.01.2010, 16:44:03
|
Re: Hintergrundmusik ausschalten
|
Anonym
|
28.01.2010, 20:15:50
|
Re: Hintergrundmusik ausschalten
|
KnuddelWelli
|
29.01.2010, 15:40:11
|
Re: Hintergrundmusik ausschalten
|
Jonnylev
|
16.02.2010, 10:48:07
|
Re: Hintergrundmusik ausschalten
|
summer brise
|
05.04.2010, 16:52:00
|
Re: Hintergrundmusik ausschalten
|
Anonym
|
08.07.2011, 20:25:26
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
22.03.2010, 11:27:22
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
22.03.2010, 11:36:50
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
22.03.2010, 15:25:25
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
lutz39
|
22.03.2010, 17:17:35
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
11.03.2011, 17:48:34
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
11.03.2011, 18:42:46
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
UnknownSubject
|
13.03.2011, 01:18:39
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
lounge
|
18.06.2011, 13:34:44
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
sarcasm
|
18.06.2011, 13:55:53
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
lounge
|
18.06.2011, 15:20:13
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
lounge
|
18.06.2011, 16:04:24
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
18.06.2011, 16:17:23
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
18.06.2011, 17:28:04
|
Suche Musikplayer für homepage
|
Anonym
|
08.04.2010, 09:19:03
|
Re: Suche Musikplayer für homepage
|
Anonym
|
08.04.2010, 09:22:04
|
Re: Suche Musikplayer für homepage
|
Anonym
|
08.04.2010, 09:26:06
|
Re: Suche Musikplayer für homepage
|
Anonym
|
08.04.2010, 09:35:46
|
Re: Suche Musikplayer für homepage
|
Anonym
|
08.04.2010, 09:43:21
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
10.05.2010, 15:23:14
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
10.05.2010, 22:40:32
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
01.06.2010, 13:07:55
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
01.06.2010, 13:55:10
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
01.06.2010, 15:11:58
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
01.06.2010, 21:01:29
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
01.06.2010, 22:17:34
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
01.06.2010, 23:06:48
|
Musik Playlist
|
Anonym
|
25.05.2010, 03:19:14
|
Flash Video einbinden.
|
Anonym
|
30.06.2010, 08:24:39
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Blizzi
|
03.07.2010, 05:09:16
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
03.07.2010, 17:02:15
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
17.07.2010, 18:06:39
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
8Andi8
|
17.07.2010, 18:58:25
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
19.07.2010, 15:34:15
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
chrixix
|
19.07.2010, 15:47:48
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
19.07.2010, 21:06:52
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
8Andi8
|
19.07.2010, 21:10:01
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
20.07.2010, 13:31:26
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
22.07.2010, 20:10:54
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
8Andi8
|
23.07.2010, 13:48:58
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
07.09.2010, 11:04:10
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
07.09.2010, 11:10:33
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
07.09.2010, 11:16:43
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
07.09.2010, 14:10:13
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
07.09.2010, 16:20:54
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
07.09.2010, 18:10:36
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
07.09.2010, 18:21:56
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
07.09.2010, 19:14:04
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
07.09.2010, 19:45:07
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
16.09.2010, 21:43:27
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
17.09.2010, 00:48:04
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
17.09.2010, 13:51:56
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
17.09.2010, 22:53:12
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
17.09.2010, 16:37:47
|
Hintergrundmusik EXPLORER
|
Anonym
|
09.11.2010, 09:22:10
|
MP3-Player
|
1995 German Dreamer
|
17.12.2010, 10:34:47
|
Re: MP3-Player
|
Anonym
|
17.12.2010, 17:13:58
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Satoshi Blue
|
23.01.2011, 14:45:05
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
23.01.2011, 16:08:58
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Satoshi Blue
|
23.01.2011, 17:02:11
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
UnknownSubject
|
23.01.2011, 17:46:13
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
UnknownSubject
|
23.01.2011, 18:33:55
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Satoshi Blue
|
29.01.2011, 01:14:08
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
UnknownSubject
|
29.01.2011, 16:34:11
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
UnknownSubject
|
30.01.2011, 01:09:01
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
UnknownSubject
|
31.01.2011, 18:22:11
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
28.02.2011, 22:34:13
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
28.02.2011, 23:03:29
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
28.02.2011, 23:25:14
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
UnknownSubject
|
01.03.2011, 01:12:41
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
Anonym
|
01.03.2011, 01:49:42
|
Re: Fragethread: Musik- und Videoeinbindung - Teil 2
|
UnknownSubject
|
01.03.2011, 13:29:16
|
Musikplayer auf die HP
|
Anonym
|
09.03.2011, 18:41:18
|
Re: Musikplayer auf die HP
|
Anonym
|
09.03.2011, 21:40:56
|
Hintergrundmusik
|
Kyra Uchiha
|
29.11.2012, 07:06:06
|
Re: Hintergrundmusik
|
lutz39
|
29.11.2012, 11:30:52
|
Re: Hintergrundmusik
|
Blackblood
|
29.11.2012, 11:40:00
|
Re: Hintergrundmusik
|
lutz39
|
29.11.2012, 11:42:48
|
Re: Hintergrundmusik
|
Kyra Uchiha
|
29.11.2012, 14:30:03
|
Re: Hintergrundmusik
|
Anonym
|
29.11.2012, 16:17:50
|
Re: Hintergrundmusik
|
Kyra Uchiha
|
29.11.2012, 16:39:29
|
Re: Hintergrundmusik
|
Anonym
|
03.12.2012, 21:13:45
|
Re: Hintergrundmusik
|
Anonym
|
11.12.2012, 16:17:31
|
Re: Hintergrundmusik
|
Anonym
|
11.12.2012, 17:10:04
|
|
|
|