Mittwoch, Dezember 17th, 2008
Heute hab ich ein Tipp vom Freund bekommen über 25 jQuery Tipps. Sofort angeschaut und war begeistert über alle diese Tipps, da sie richtig gut sind.
Der Beste der mir gefallen hat, dass man jQuery nicht mehr von eigenem Server laden kann sondern man lässt den jQuery Script von dem Google Server laden.
Ich hab auch schon Google für mich genutzt für den jYoup Player nur bei jQuery kannte ich nicht den Pfad.
Die Vorteile sind, dass man den Traffic spart und auch dem User spart man die Zeit, falls er schon jQuery von Google gecached hat. Da Google 99% online ist, braucht man auch keine Angst darüber haben das der Script mal nicht da ist.
Hier ist ein Beispiel:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
Und hier sind die besten Tipps für jQuery: 25 excellent tips
Posted in Meine Links, Tipps, jYoup | 1 Comment »
Samstag, August 30th, 2008
Ich hab den jYoup verbessert um ihn besser in eigene Seiten einbinden. Dazu kann man jetzt nach einem Schema eigenen Design anlegen ohne großen Aufwand. Darüber werde ich in den nächsten Tagen ein Tutorial schreiben.
Den jYoup einbinden ist sehr einfach geworden, wie es geht versuche ich es in 3 Schritten zu zeigen.
1. jYoup Downloaden
Als erste holen wir uns die neue jYoup Version von hier oder direkt auf Download klicken. Den Archiv kann man direkt Auspacken ohne neuen Ordner anlegen, den er ist in schon in einem Ordner jyoup
2. jYoup Einbinden
Jetzt schiebt man den Ordner jyoup per FTP oder SSH auf den Server in den Domain Root Ordner.
/meine/domain/root/jyoup
Als nächstes um den jYoup benutzen zu können muss man den jYoup im Head des Htmls per Script einbinden.
<html>
<head>
<title>Mein Titel</title>
<script type="text/javascript" src="/jyoup/jyoup.js"></script>
</head>
<body></body>
</html>
Wenn man vor hat nicht viele jYoup Player in eine Seite einzubinden wie in einen Blog, der kann auch den jYoup direkt bei der Nutzung einbinden.
3. jYoup Nutzen
Jetzt kann man den jYoup an die Stelle einbinden wo man in haben will.
<html>
<head>
<title>Mein Titel</title>
<script type="text/javascript" src="/jyoup/jyoup.js"></script>
</head>
<body>
<script type="text/javascript">
jYoup({playList: 'VideoID1,VideoID2', width: 500, color:'blue'});
</script>
</body>
</html>Um die Buttons auszutaschen, kann man per color Attribut die Farbe setzen. Zurzeit gibt es 3 Farben red, green, blue.
Und schon kann man den Player in der eigenen Seite betrachten.
Man kann mehrere jYops gleichzeitig einbauen, ohne das sie sich gegenseitig stören. Leider kann man nicht die Farbe mischen wie 2 Farben auf einmal zeigen.
Posted in jYoup | No Comments »
Donnerstag, August 28th, 2008
Es ist manchmal so, dass man Blind ist und Sachen nicht sieht die direkt vor den Augen stehen. Heute hab ich den Playlist Editor im Youtube wieder neu entdeckt. Irgend wie ist mir die Möglichkeit eigene Playlisten in einem Flash Player abzuspielen gar nicht aufgefallen.
Trotzdem werde ich den jYoup Player weiter nutzen und verbessern um ihn auch viel besser in eigene Projekte zu integrieren und bedienen.
Posted in jYoup | No Comments »
Mittwoch, August 27th, 2008
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.
Posted in jYoup | 1 Comment »
