Den Anfang der API-Reihe macht der YouTube-Player. Der Artikel wird ein wenig länger, weshalb ich ihn in zwei Teile aufgespalten habe. In Part 1 kommt der weniger geekige codelastige Teil mit den Parametern. In zwei Wochen kommt in Part 2 dann der eigentliche API-Inhalt mit selbstgebastelten Bedienelementen für ein Video.
Die Code-Beispiele mit eingebundenen Videos sind eine valide und gekürzte Form dessen, was YouTube zum Rauskopieren anbietet. embed und param name="movie" entfallen, dafür steht der Verweis zum Video in object data="…". Sieht man gleich.
fs (default 0)1 gesetzt, lassen sich Videos in den Fullscreen-Modus umschalten. Kopiert man den YouTube-Code, steht es bereits mit drin.hd (default 0)1 gesetzt, wird das Video in HD abgespielt, insofern vorhanden. Es wird nicht automatisch die höchste Auflösung genommen! Ein Video mit 360p und 480p wählt dann nicht die höheren 480p.iv_load_policy (default 1)Setzt man den Wert auf 3, werden video annotations nicht angezeigt.
<object width="400" height="250"
type="application/x-shockwave-flash"
data="http://www.youtube-nocookie.com/v/
jBmP7xTI_TA&fs=1&iv_load_policy=3">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object>Zum Vergleich: youtube.com/watch?v=jBmP7xTI_TA
loop (default 0)1 gesetzt, startet das Video am Ende neu.rel (default 1)0 gesetzt, werden keine verwandten Videos geladen, die u.a. nach Ende des Videos angezeigt würden.showinfo (default 1)0 gesetzt, wird der Titel und mögliche andere Informationen (früher mal die Bewertung) nicht mehr angezeigt.startDieses Video hat ein schlechtes 21 Sekunden-Intro. Mit start lässt sich der Startpunkt um die gegebene Sekundenzahl versetzen.
<object width="400" height="250"
type="application/x-shockwave-flash"
data="http://www.youtube-nocookie.com/v/
Xo3Tpw-zLkM&fs=1&start=22">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object>Noch ein paar mehr Parameter stehen unter YouTube Embedded Player Parameters.
Möchte man Videos von YouTube einbetten, bietet das Portal einem ein paar Optionen an. Darunter eine, die verlautet „Enable privacy-enhanced mode“/„Erweiterten Datenschutzmodus aktivieren“. Was sich am Code dann ändert ist, dass die Videos nicht mehr von youtube.com, sondern von youtube-nocookie.com abgerufen werden. Was macht den Unterschied?
Die YouTube-Hilfe erklärt:
Mit diesem Modus wird verhindert, dass YouTube Cookies für einen Nutzer speichert, der (…) nicht auf das Video klickt, um die Wiedergabe zu starten.
Zwar speichert YouTube unter Umständen Cookies auf dem Computer des Nutzers, nachdem er auf den YouTube-Videoplayer geklickt hat, es werden jedoch keine personenbezogenen Cookie-Informationen für Wiedergaben von eingebetteten Videos mit erweitertem Datenschutz gespeichert.
Cookies werden also nicht nur gesetzt, wenn man auf YouTube selbst ist, sondern auch von jeder Seite, die ein Video einbettet – unabhängig davon, ob das Video überhaupt gestartet wurde. Die erweiterte Datenschutz-Option ändert dieses Verhalten. Damit werden Cookies erst gesetzt, wenn auch das Video gestartet wird, und es werden keine personenbezogenen Daten darin gespeichert.
Was dafür spricht, diese Option zu verwenden: Wenn ich nicht auf YouTube bin, sollte ich auch keine Cookies von der Seite erhalten. Noch dazu solche, die sich merken können, welche Videos ich mir wo angeschaut habe. Ich halte es nur für faires Verhalten gegenüber den eigenen Besuchern, den Datenschutzmodus zu aktivieren.
Was YouTube einem an Code zum Einbetten gibt, ist weit davon entfernt, valide zu sein. Vermutlich, weil der Anbieter eine höchstmögliche Kompatibilität mit allen Browsern erreichen möchte. Was eigentlich ein Schlag in die Magengrube der Webstandards ist, die für eine einheitliche Darstellung in die Welt gesetzt wurden.
So ähnlich sieht der Code aus, wie YouTube ihn bereitstellt.
<object width="425" height="344">
<param
name="movie"
value="[…]/v/NvE8XO6YH6o&hl=de&fs=1">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed
src="[…]/v/NvE8XO6YH6o&hl=de&fs=1"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="425" height="344">
</embed>
</object>
Entledigen wir uns erst einmal des embed, indem wir die wichtigen Informationen in das object umsiedeln; aus dem Attribut src wird dabei data; der Rest wird bereits über param übergeben. Embed wurde von Netscape eingeführt und alle Browser haben es aufgegriffen; ein Standard wurde es nie.
<object
width="425" height="344"
type="application/x-shockwave-flash"
data="[…]/v/NvE8XO6YH6o&hl=de&fs=1">
<param
name="movie"
value="[…]/v/NvE8XO6YH6o&hl=de&fs=1">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
</object>
Jetzt noch anstatt & („Ampersand“) dessen Entität (&) angeben und optional die param als leere Elemente kennzeichnen, ohne schließendes Tag.
<object
width="425" height="344"
type="application/x-shockwave-flash"
data="[…]/v/NvE8XO6YH6o&hl=de&fs=1">
<param
name="movie"
value="[…]/v/NvE8XO6YH6o&hl=de&fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object>
Unser Ergebnis: Valides XHTML 1.0 Strict. Wer es jetzt genauer wissen möchte, den verweise ich auf diese beiden großartigen Artikel: A List Apart: Flash Satay und A List Apart: Bye Bye Embed.
Das Original mag ich bereits und diese Klavierumsetzung ist einfach wunderbar. Und melodiöser … harmonischer … ihr wisst schon was ich meine. Auch wenn dir das Original missfällt, höre dir diese Klavierversion von UnclassicalPiano auf jeden Fall mal an!
Jener Benutzer hat auch noch weitere Klavierstücke eingestellt, darunter weitere von Linkin Park, aber auch Metallica, Iron Maiden und mehr.
Vom gleichen Pianist: Led Zeppelin – Stairway To Heaven (Piano)
Video auf Youtube: http://www.youtube.com/watch?v=TPJUstvMJFE