Binden Sie ihre Videos auf Ihrer Homepage ein
Wenige Zeilen HTML/JavaScript-Code genügen, um Ihre Video nebst Steuerelementen im Webbrowser anzuzeigen
Um Ihre Videos grafisch ansprechend einzubinden und zugleich mit einer komfortablen Player-Oberfläche auszustatten, empfehlen sich kostenlose Flash-Player-Lösungen wie der Flash FLV Player (http://www.martijndevisser.com/blog/flv-player oder der Flowplayer (http://flowplayer.org). Letzterer lässt sich noch etwas leichter konfigurieren, weshalb dieser Player nachfolgend beschrieben wird. Die Installation ist schnell erledigt:
- Laden Sie zunächst unter der Adresse http://flowplayer.org/download/index.html das OpenSource-Installationspaket des Flowplayers herunter.
- Entpacken Sie das heruntergeladene ZIP-Archiv in das HTML-Verzeichnis Ihres Webservers.
- Die Einbindung bzw. die Anzeige der Flash-Steuerelemente des Players erfolgt via JavaScript; das zugehörige Skript, das Sie im Verzeichnis „flowplayer/example/flowplayer-3.0.6.min.js“ des entpackten ZIP-Archivs finden, müssen Sie nun im <head>-Bereich Ihrer Internetseite referenzieren. Im Beispiel geschieht das in folgender Codezeile:
<script src="flowplayer/example/flowplayer-3.0.6.min.js"></script> - Als Nächstes binden Sie einen Platzhalter für das anzuzeigende Video an der gewünschten Stelle in Ihre HTML-Seite ein. Günstigerweise sollten Sie zur Einbindung das <a>-Tag nutzen, also beispielsweise:
<a href="flashvideo.flv"
style="display:block; width:720px; height:576px;"
id="player">
</a> - Die CSS-Angaben zur Breite (width) respektive Höhe (height) entsprechen dabei der Bildgröße des einzubindenden Videos. Über das href-Attribut wird das eigentliche Flash-Video (hier: flashvideo.flv) referenziert, das im Beispiel der Einfachheit halber direkt im Stammverzeichnis des Webservers liegt.
- Im letzten Schritt müssen Sie den Player noch per JavaScript konfigurieren. Als Minimalangaben müssen Sie dazu die Element-ID übergeben, spricht das DOM-Element (Document Object Model) in dem der Player angezeigt werden soll. Dieses lautet im obigen Beispiel schlicht „player“ (id=“player“). Des Weiteren müssen Sie die benötigte Flash-Datei (flowplayer-3.0.7.swf) übergeben, die die Programmlogik enthält, um das Video mittels Flash abspielen und die Steuerelemente nutzen zu können. Diese finden Sie im Verzeichnis „flowplayer“ im entpackten ZIP-Archiv. Der JavaScript-Code sieht im Beispiel dann wie folgt aus:
<script language="JavaScript">
flowplayer("player", "flowplayer/flowplayer-3.0.7.swf");
</script>
Nachfolgend ein minimales Seitengerüst, dass die verschiedenen Implementierungsschritte zusammenfassend darstellt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="flowplayer/example/flowplayer-3.0.6.min.js"></script>
<script language="JavaScript">
flowplayer("player", "flowplayer/flowplayer-3.0.7.swf");
</script>
<title>Seite mit Flash-Video</title>
</head>
<body>
<a href="flashvideo.flv"
style="display:block;width:720px;height:576px;"
id="player">
</a>
</body>
</html>
Linux kinderleicht - mit unseren reglmäßigen Experten-Tipps
- Wir benötigen Ihre E-Mail-Adresse für die Zusendung des Newsletters.
- Wir geben Ihre E-Mail-Adresse garantiert nicht an Dritte weiter.
- Jederzeit abbestellbar durch einen Link im Newsletter.
