jQuery-Plugin MediaWrapper als Drupal-Modul

Kurz-URL: http://mkzä.de/1562

Der jQueryMediaWrapper ist jetzt auch aus Drupal-Modul nutzbar. Somit ist es noch einfacher, ihn in einzusetzen.

Hintergrund

Gelegentlich werden hier Videos von YouTube oder Vimeo eingebunden. Auch Audio-Player von Soundclound, Bandcamp und Jamendo waren vertreten. Aus Datenschutzgründen wurde, analog zum socialshareprivacy-Plugin für Facebooks "gefällt mir", Googles +1 und Twitters Tweet-Button, eine Javascript-basierte Lösung eingesetzt: Erst nach einem Click auf ein Icon wurde der eigentliche Player eingebunden, der dann wiederum per Klick gestartet wurde. Im Zuge der #37cc wurde der bisherigen Code zu einem jQuery-Plugin migriert. Jetzt kann er auch als Drupal-Modul verwendet werden.

Nach der Installation des Moduls, ist ein neuer Eingabefilter vorhanden, der in den Einstellungen bei den Eingabeformaten aktiviert werden kann. Danach kann ein Mediaplayer im einfachsten Fall wie folgt eingebunden werden:

[media]http://vimeo.com/15829164[/media]

Als Properties stehen id, url und href zur Verfügung. url ist die URL, über die der eigentliche Player eingebunden wird, href ist die URL auf die Seite des Anbieters. Mit id ist es möglich, das generierte Element per CSS zu formatieren. Wird id weggelassen, wird ein MD5-Hash aus url generiert. Wird link weggelassen, wird hierfür url verwendet. Fehlt auch dieser Parameter, muss zwischen den media-Tags eine URL stehen.

Wird link verwendet, wird der Inhalt zwischen den Media-Tags als Beschreibung für einen Link verwendet, wenn der Nutzer JavaScript deaktiviert hat.

Unterstützte Anbieter

Vimeo/YouTube/Jamendo

Bei den drei Anbieter kann einfach die URL des Inhalts verwendet werden.

http://vimeo.com/26717222

[media]http://vimeo.com/26717222[/media]

http://www.youtube.com/watch?v=iqgMtlf46UY

[media]http://www.youtube.com/watch?v=iqgMtlf46UY[/media]

http://www.jamendo.com/de/album/90059

[media]http://www.jamendo.com/de/album/90059[/media]

Soundclound/Bandcamp

Die Einbindung von SoundCloud und Bandcamp ist etwas komplexer. Hier der Embedd-Code des Anbieters benutzt werden. Hintergrund ist, dass bei den Audioportalen lesbare Urls verwenden, mit der die Embedding-API nichts anfangen kann.

Bei Soundcloud muss unter Share der Embed Code kopiert werden:

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F3347708&show_artwork=true"></iframe>

Dieser wird komplett in das media-Tag kopiert:

[media link="http://soundcloud.com/musique-it/professor-kliq-elephantitis"]<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F41424237&show_artwork=true"></iframe>[/media]

Im link-Attribut steht zusätzlich die URL auf die "normale" Seite. Nach dem schliessenden iframe-Tag kann ein Text für Nutzer ohne JavaScript angegeben werden. Wird er weggelassen, wird der Inhalt des Link-Attributes verwendet. Wird auch dieses weggelassen, wird die direkte URL auf den Player angezeigt.

http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F41424237&amp;show_artwork=true

Bei Bandcamp geht man über Share/Embed -> Other. Man bekommt etwas dieser Form:

<iframe width="400" height="100" style="position: relative; display: block; width: 400px; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=1005390724/size=venti/bgcol=FFFFFF/linkcol=4285BB/" allowtransparency="true" frameborder="0"><a href="http://rusconi.bandcamp.com/album/revolution">Revolution by RUSCONI</a></iframe>

Dieser Code wird komplett in das media-Tag kopiert, ein link-Attribut muss nicht explizit angegeben werden, es wird aus dem Embedding-Code extrahiert:

[media]<iframe width="400" height="100" style="position: relative; display: block; width: 400px; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=1005390724/size=venti/bgcol=FFFFFF/linkcol=4285BB/" allowtransparency="true" frameborder="0"><a href="http://rusconi.bandcamp.com/album/revolution">Revolution by RUSCONI</a></iframe>[/media]

Revolution by RUSCONI

Da Bandcamp kein AutoPlay unterstützen, hat man hier sogar auch ohne FlashBlock einen 2-Click-Player. ;)

Ausbau

Auf der "was wäre denn machbar"-Liste habe ich bis jetzt folgende Punkte stehen:

  • Konfigurierbarkeit, aller Parameter, die die Media-Plattformen anbieten.
  • Erweiterung um andere Plattform
  • Hübscher Hinweistext bei mouseover, der auf eine Erklärungsseite verlinkt
  • Per Cookie speichern, welche Seiten automatisch eingebunden werden dürfen
  • Erweiterung des Moduls um oembed-Unterstützung (damit hätte man hübsche Vorschaubilder)
  • Portierung auf Drupal 7/8

Für meine Zwecke reicht das, was der "Player" kann allerdings vollkommen aus. Wer also eine Erweiterung möchte, muss dies laut kundtun. Auch Anregungen für anderen Punkte sind willkommen!

Download

Der Download ist via git bei drupal.org möglich. Sobald der Code durch den Review-Prozess ist, bekommt er dort eine hübsche URL und kann via http bezogen werden.

Noch keine Bewertungen

Artikel

Projekte

Interviews

Informationen