jYoup in the Wild

jYoup in the Wild

Ich betreibe nebenbei eine Seite wo ich Videos von Youtube einbinde. Bei einem Video gibt es kein Problem es in den Artikel zu integrieren. Es gibt aber Videos die wegen ihrer Länge und Größe in mehrere Teile aufgeteilt werden. Wen ich so ein Video in den Artikel integrieren will, muss ich alle Teile einfügen. Damit sprenge ich meinen Content als auch den Download Trafic der User die alle Teile laden müssen. Das hat mich immer genervt und ich hab angefangen nach der Lösung zu suchen.

Es gab da schon eine API von Youtube, mit welcher man mit JavaScript den Playern Steuern kann. Diese API hab ich angefangen zu studieren und mir wurde am Ende klar das ich einen eigenen Player mit der API von Youtube zusammen stellen werde.

Am Anfang hab ich jQuery als Bibliothek genommen und entwickelte auf ihr Kompletten Player. Was mich gestört hat, war die Größe der jQuery. Da ich noch den swfobject genutzt habe um Flash zu integrieren wurde es mir zu viel. Ich hab einfach die beiden rausgeschmissen mit dem Ziel dem Webmaster der diesen Player einbaut nicht noch mit anderen Bibliotheken zu überladen. Und so hab ich den jYoup geboren. Der sehr schlank geworden ist. Im komprimierten zustand ist der Player jetzt 9Kb. Mit den Buttons und den Style Sheets wiegt er insgesamt 38Kb. Den größten Teil nehmen die Bilder ein, da ich sie in PNG mit Transparenz abgespeichert habe, um die Farbe des Players nach belieben zu verändern ohne die Buttons anzufasen. So kam noch ein Hack dazu um die Buttons auch im IE6 mit Transparenz zu zeigen.
Bei der ersten Version hab ich durch den Wmode Parameter die Bedienelemente über den Flash Player gelegt. Auf einer Seite ohne Inhalt lief das Video recht Flott. Als ich den Player in ein Blog eingefügt habe, war ich voll erschrocken an der Prozessor Last was der Player produzierte. Noch nicht mal die Abspielzeit wurde gezählt auf meinem Alten 2500 MHz alten Notebook. So musste ich die Elemente unter dem Video anlegen um die Wmode Transparenz auszuschalten. Danach lief der Player ohne ruckeln.
Das war die Vorgeschichte, jetzt stell ich den Player einmal vor.

Was ist jYoup:
jYoup ist ein selbständiges Objekt der den API Player und die Bedienung des Players auf JavaScript Basis vereint. Man kann den Player mit einer langen Liste an Videos in den Html Code in einem Script Tag integrieren und schon hat man einen einzigen Youtube Player der alle Videos in sich abspielt.

<script type="text/javascript">
jYoup({playList: 'VideoID1,VideoID2,VideoID3',width:500});
</script>

Design:
Das aussehen des Players kann über die Styles verändert werden. Wie zum Beispiel den Rahmen oder die Farbe der Bedienelemente kann nach belieben verändert werden ohne JavaScript anzufassen. Da es so einfacher ist Player zu designen ohne JavaScript. Das einzige was per JavaScript gesetzt werden soll ist die Breite des Players, die Höhe ist Optional. Jeder kann die Buttons austauschen oder die Original Buttons des Players aus einer PSD Datei an eigene Farben anpassen.

.jyp_player { float:left; background:red; border:2px solid red; }
.jyp_play { background:url(/jyoup/pix/play.png); }

Und hier ist der Player Live mit 2 Videos:

Was hat jYoup was Youtube nicht hat:

• Playlisten ohne Registrierung selber zusammen stellen
• Wiederholung der Playlist oder einzelnes Video
• Eigene Gestalltung der Bedien Elemente

jYoup in nächster Zukunft:

• Fullsize wird integriert
• Kommentare nach der Zeitleiste
• Dynamisches Laden der Video Eigenschaften wie Name und Beschreibung
• Plugin für Wordpress

Verträglichkeit der Browser:

• IE6 / IE7
• Firefox 2 / 3 (sowie auf Linux)
• Chrome
• Opera 9.2 und höher
• Andere Browser noch nicht getestet (sagt bescheid ob es auf anderen Browsern läuft)
• Konqueror lief leider nicht

Nachteil:
Die einzigen Nachteile sind, wenn die User JavaScript ausschalten oder alten Browser benutzen. Mir sind diese User sowieso egal, den sie sollten Schleunigst auf neueren Browser umsteigen und JavaScript aktivieren um das Internet in Vollem Umfang zu geniessen.

Lizens:
Ich habe den Player unter GNU Lizens gestellt, somit kann jeder den Player ohne bedenken nutzen und bearbeiten.

Mitmachen:
Da ich nicht soviel Zeit habe den jYoup Komplett zu betreuen brauche ich Hilfe. Wenn jemand Interesse hat den Player mit neuen Features zu bereichern und am Projekt teilzunehmen. Der kann sich bei mir melden und ich schalte ihn dann für den Projekt frei. Ich hab den ganzen Player in Google Code eingefügt wo es die Möglichkeit gibt SVN zu nutzen.
Dazu brauche ich Hilfe Seiten wie man den Player einsetzen kann.
Und Ideen wie man den Player noch besser macht.

Wo kann ich den Player runterladen?
Auf der Projekt Seite jYoup kann man den Player runterladen oder diesen Download Link folgen.