So holen Sie das letzte aus dem JWPlayer raus

Teil 2: Workshop: Profitipps für den JWPlayer

18.1.2010 von Redaktion pcmagazin und Tim Kaufmann

ca. 2:45 Min
Ratgeber
  1. Workshop: Profitipps für den JWPlayer
  2. Teil 2: Workshop: Profitipps für den JWPlayer

Die HD-Automatik ist längst nicht jedermanns Sache, denn neben der Bandbreite bestimmt auch die Leistungsfähigkeit des Client-Rechners über die ruckelfreie Wiedergabe. Wer die Automatik abschalten möchte, der lädt mit &plugins=hd-0 eine ältere Version des Plugins. Diese lädt die HD-Version nur dann, wenn man sie mit &hd.state=true aktiviert, beziehungsweise wenn der Benutzer auf den HD-Knopf klickt.

Wordpress-Integration

Über Module, die Sie wie Plugins und Skins von der JWPlayer-Website herunterladen können, lässt sich der Player in Content-Management-Systeme integrieren. Derzeit existieren unter anderem Module für Joomla, Drupal und Wordpress.

Für Letzteres gibt es zwei verschiedene Module, wobei wir das Flash Video Player Plugin verwenden, da es das Neuere ist, alle wichtigen Funktionen mitbringt und sich sehr leicht installieren lässt.

Kopieren Sie den Inhalt der heruntergeladenen Zip-Datei in den Ordner wp-contents/plugins Ihres Wordpress-Blogs. Danach öffnen Sie die Wordpress-Admin und aktivieren das Plugin. Ab sofort können Sie mit dem neuen Wordpress-Tag [flashvideo] Videos samt JWPlayer in Ihre Postings aufnehmen:

[flashvideo file=videos/my-video.flv /]

Je nachdem, wo Ihr Upload-Verzeichnis liegt, müssen Sie den Pfad dabei gegebenenfalls anpassen oder mit absoluten URLs arbeiten.

JWPlayer mit Skins

Über Skins können Sie JWPlayer nicht nur dem übrigen Design einer Website anpassen, sondern auch Bedienelemente ein- und ausblenden.

Anders als Plugins werden Skins tatsächlich zunächst auf Ihren Rechner heruntergeladen. Nach dem Auspacken kopieren Sie die SWF-Datei, die die neue Oberfläche transportiert, per FTP auf den Webserver. Dann wird das Skin in den Player konfiguriert:

so.addVariable("skin", "pfad/
skinname.swf");

beziehungsweise durch Ergänzung von flashvars mit

&skin=pfad/skinname.swf

Wer sich ein wenig mit Actionscript auskennt und über Adobe Flash verfügt, der kann das Skin seiner Wahl auch direkt in den JWPlayer einkompilieren und den Ladevorgang damit etwas beschleunigen.

Plugin-Vielfalt

Es lohnt sich, durch den Plugin-Katalog von JWPlayer zu blättern: So blendet das Plugin Viral einen Link zum Video und den zugehörigen Embed-Code ein, mit dem Dritte Ihr Video in eine Webseite integrieren können.

Über die Plugins Google Analytics und Your Analytics können Sie einzelne Events wie Wiedergabe, Pause und Stop in der Zugriffsstatistik erfassen. Auch Video-Werbung oder barrierefreie Videos mit Untertiteln und Audiokommentar lassen sich realisieren.

Troubleshooting

Es gibt ein paar Probleme, die im Umfeld von JWPlayer auftreten, aber aus dem wiederzugebenden Material herrühren. Wenn sich etwa der Fortschrittsbalken während der Wiedergabe nicht bewegt oder das Verhältnis von Höhe und Breite des Videos verzerrt wird, liegt das an fehlenden Metadaten in der FLV-Datei.

Workshop: Video-Player
Das Viral-Plugin zeigt Zuschauern Links und Code, mit denen sie das Video weiterempfehlen und in eine eigene Seite einbetten können.
© Archiv

Diese Probleme beheben Sie, indem Sie das Video durch den kostenlosen FLV Metadata Injector () laufen lassen. Können Sie in einer MP4-Datei nicht springen, bevor der Player diese vollständig heruntergeladen hat, ist das MOOV-Atom schuld, das Sie vom Ende des Videos an dessen Anfang bewegen müssen. Das erledigen Sie mit QTIndexSwapper von , für das Sie Adobe Air installieren müssen.

Flash per Javascript einbetten

Im einfachsten Fall wird Flash wie der JWPlayer per <embed/>-Tag in eine Seite integriert:

<embed src="player.swf" width="300"
height="300" allowscriptaccess="always" allowfullscreen="true" flashvars="file=video.flv&autostart=true" />

Das bringt jedoch zwei Nachteile mit sich: Nutzer des Internet Explorer müssen den Player erst anklicken, bevor sie das Video starten können. Außerdem ist <embed> kein valides XHTML-Tag. Deswegen erledigen Sie diesen Job besser mit Javascript. Dafür empfiehlt sich Geoff Stearns SWFObject-Script.

Es stellt zugleich auch sicher, dass die richtige Version des Flash-Players installiert ist und kann gegebenenfalls einen Download-Link, ein Video in einem alternativen Codec oder Ähnliches anbieten. Beispiel-Code für die Integration von JWPlayer mithilfe von SWFObject finden Sie unter .

zm_timkaufmann

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.