Multimedia oder wie jetzt?
Einigen unserer Leser ist es vielleicht aufgefallen: Sven postet seit einigen Tagen vermehrt Videos.
Das ist insofern bemerkenswert, als dass das bisher in unserem "Blogsystem" nicht möglich war, da es nur diverse Grundformatierungen per BB-Code ermöglichte. An Multimedia-Einbettungen war nicht zu denken.
Intern arbeiten wir hier schon seit einiger Zeit an unserer neuen Website, mit der alles für alle besser werden soll. Allerdings zieht sich das aufgrund der gottseidank guten Auftragslage und den vielen damit verbundenen spannenden Projekten etwas. Man kommt halt nicht mehr dazu, großartig eigene Sachen zu machen.
Um Sven aber trotzdem die Möglichkeit zu geben, hier jetzt schon etwas multimedialer aktiv zu werden, hab ich eine entsprechende Lösung eingebaut, die zudem unglaublich einfach zu handhaben ist.
Sie basiert auf meinem Lieblings-JavaScript-Framework jQuery, dem jQuery-Plugin jQuery Flash von Luke Lutman und dem Flash-Media-Player von Jeroen Wijering.
Damit wird zum Beispiel aus:
<a href="http://de.sevenload.com/pl/DDPjk4r/380x313/swf" class="flashvid">Rapidobject-Image-Trailer bei Sevenload</a>Das hier:
Rapidobject-Image-Trailer bei Sevenload mit eingebautem Player
Aus dem hier:
<a href="http://media.echomusic.com/videos/kanyewest/kanyewest_canttellme_alt.flv" class="flv">flv-Datei mit Mediaplayer von Jeroen Wijering</a>Das hier:
flv-Datei mit Mediaplayer von Jeroen Wijering
Und daraus:
<a href="http://medienfreunde.com/media/mp3/palestar-drowned_in_a_bathtub.mp3" class="mp3">mp3-Datei "Drowned In A Bathtub" von Palestar mit Mediaplayer von Jeroen Wijering</a>Dieses hier:
mp3-Datei "Drowned In A Bathtub" von Palestar mit Mediaplayer von Jeroen Wijering
Die entsprechenden Anweisungen, welche die Umwandlung der Links mit den Klassen in standardkonforme Flasheinbindungen bewirkt sieht wie folgt aus:
$('a.flashvid').flash(
{ height: 308, width: 374 },
{ version: 8 },
function(htmlOptions) {
$this = $(this);
htmlOptions.src = $this.attr('href');
$this.before($.fn.flash.transform(htmlOptions));
$this.hide();
}
);
$('a.flv').flash(
{ src: 'http://medienfreunde.com/cms/flash/flvp.swf', height: 308, width: 374, allowfullscreen: true },
{ version: 7 },
function(htmlOptions) {
$this = $(this);
htmlOptions.flashvars.file = $this.attr('href');
$this.before($.fn.flash.transform(htmlOptions));
$this.hide();
}
);
$('a.mp3').flash(
{ src: 'http://medienfreunde.com/cms/flash/flvp.swf', height: 20, width: 374 },
{ version: 7 },
function(htmlOptions) {
$this = $(this);
htmlOptions.flashvars.file = $this.attr('href');
$this.before($.fn.flash.transform(htmlOptions));
$this.hide();
}
);Alles ganz einfach eigentlich …
Torsten Baldes
Fade Away - InnerFade with jQuery (11.09.2006)
Fade Away - InnerFade with jQuery II (29.01.2007)
Flash-Plugin für jQuery von Luke Lutman