Lichtspielhaus

Bewegte Bilder sind im Internet keine Seltenheit mehr. Wer YouTube und Co. nacheifern will, braucht lediglich einen Webserver und ein paar zusätzliche Werkzeuge, die ebenfalls im Netz zu finden sind.

30.04.2009, 02:00 Uhr

Lesezeit: 3 Min.

iX Magazin

Von

Horst Eidenberger

HTML bietet mit dem Element embed einen Mechanismus, beliebige Medien in Webseiten einzubinden. Allerdings kann der Browser sie nur abspielen, wenn ihm ein passendes Plug-in zur Verfügung steht. Außerdem erlaubt es embed nicht, Metadaten anzugeben oder das Verhalten des Plug-in zu konfigurieren. Daher kommt es heute kaum noch zum Einsatz.

Stattdessen vertrauen Anbieter meist auf den Flash-Player von Adobe. Der kann allerdings nur Shockwave-Dateien abspielen – nicht einmal das hauseigene FLV-Format ist als Datentyp erlaubt. Er kann jedoch einen Media Player in Form einer Shockwave-Datei ausführen, die die Mediendaten vom Server lädt und mithilfe der im Flash-Player integrierten Codecs darstellt.

Den Flash-Player kann man mit dem HTML-Element object einbetten. Argumente lassen sich dann bequem mit param übergeben. Allerdings benötigt der Internet Explorer eine Extrawurst. Mit Conditional Comments kann man ihm jedoch eine eigene Version des Codes unterschieben (siehe Listing 1). Die Class-ID charakterisiert den verwendeten Player. Der Autor nutzt den JW FLV Media Player von LongTail Video (siehe iX-Link), der zahlreiche Konfigurationsmöglichkeiten bietet.

Listing 1: Flash-Player einbinden mit object

<!--[if IE]>
<object width='800' height='600'
 classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'>
 <param name='movie' value='player.swf' />
 <param name='flashvars' value='file=video.mov' />
</object>
<!--<![endif]-->
<!--[if !IE]>-->
<object data='player.swf' width='800' height='600'>
 <param name='flashvars' value='file=video.mov' />
</object>
<!--<![endif]-->

Eleganter geht es mit JavaScript und der SWFObject-Bibliothek. Nach dem Laden der Datei swfobject.js kann man mit dem Konstruktor new SWFObject eine Player-Instanz erzeugen. Weitere Optionen lassen sich mit addParam übergeben. Ein abschließender Aufruf der Methode write startet den Player (siehe Listing 2).

Listing 2: Player-Integration mit JavaScript

<html>
 <head>
 <script type='text/javascript' src='swfobject.js'>
 </script>
 </head>
 <body>
 <p id='mpp'>Media Player Panel</p>
 <script type='text/javascript'>
 var mp = new SWFObject(
 'player.swf', 'player', '720', '576', '10');
 mp.addParam('flashvars', 'file=video.flv');
 mp.addParam('allowfullscreen', 'true');
 mp.write('mpp');
 </script>
 </body>
</html>

Viele Webserver bieten die Shockwave-Datei als Attachment zur Webseite an. Der Flash-Player vertraut jedoch seit Version 8 Attachments nicht mehr und weigert sich, sie auszuführen. Der Server muss deshalb die Datei im HTTP-Response-Header als inline deklarieren. Bei Apache lässt sich das mit der Anweisung Header set content-disposition inline erreichen.

Mehr Komfort bietet Version 2 der SWFObject-Bibliothek. Dort kann man die Parameter für den Shockwave-Player als Hashes an die statische Methode swfobject.embedSWF übergeben (siehe Listing 3). Alle in params angegebenen Attribute richten sich an den Flash-Player. Wichtig ist, den Netzwerkstack des Players eingeschaltet zu lassen (allownetworking: all). Mit allowfullscreen kann man die Option zur Nutzung des gesamten Schirms aktivieren.

Listing 3: Konfiguration mit SWFObject 2

<p id='mpp'>Media Player Panel</p>
<script type='text/javascript'>
  var params = {
    allowfullscreen: 'true',
    allownetworking: 'all',
    scale: 'exactfit',
    align: 'l',
  };
  var flashvars = {
    file: 'movie.flv',
    title: 'Titel des Videos',
    author: 'Horst Eidenberger',
    type: 'video',
    description: 'Beschreibung des Videos',
    date: 'April 19th 2009',
    duration: '300',
    tags: 'Video, SWFObject, JavaScript, iX',
    link: 'http://example.org',
    displayclick: 'link',
    linktarget: '_blank',
    backcolor: '#111111',
    frontcolor: '#777777',
    lightcolor: '#FFFFFF',
    screencolor: '#000000',
    controlbar: 'top',
    width: '720',
    height: '640',
    icons: 'false',
    image: 'standbild.tif',
    playlist: 'none',
    autostart: 'false',
    start: '30',
    bufferlength: '5',
    repeat: 'always'
  };
  var attributes = {};
  swfobject.embedSWF('player.swf', 'mpp',
    '720', '576', '10', 'expressInstall.swf',
    flashvars, params, attributes);
</script>

Attribute für den LongTail-Player sind in flashvars zu finden. file referenziert die Mediendatei oder einen Streaming-Server. Mit den Attributen von author bis tags lassen sich Metadaten angeben. link referenziert eine externe Webseite, die sich in einem neuen Fenster öffnet, wenn man auf das Video klickt. Die übrigen Werte bestimmen das Aussehen und Verhalten des Players. Setzt man icons auf true, blendet er einen halbtransparenten Startknopf in das Medium ein. Alternativ kann man mit image ein Standbild als Startansicht vorgeben. playlist erlaubt es, mehrere Medien nacheinander abzuspielen. Soll der Player den Anfang der Datei überspringen, kann man mit start die Wiedergabe an einem späteren Punkt beginnen lassen. bufferlength legt fest, wie viel Material (in Sekunden) der Player herunterladen muss, bevor er mit dem Abspielen beginnen darf.