Binden Sie ihre Videos auf Ihrer Homepage ein

03. Juli 2009
Reiner Backer Von Reiner Backer, Windows, Hardware, Linux ...

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:

  1. Laden Sie zunächst unter der Adresse http://flowplayer.org/download/index.html das OpenSource-Installationspaket des Flowplayers herunter.
  2. Entpacken Sie das heruntergeladene ZIP-Archiv in das HTML-Verzeichnis Ihres Webservers.
  3. 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>
  4. 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>
  5. 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.
  6. 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>

 

Gratis: Linux Startpaket inkl. Ubuntu Vollversion

Jetzt parallel zu Windows installieren!

  • Nie wieder Windows-Fehlermeldungen
  • Nie wieder Geld für ein Betriebssystem ausgeben
  • Jetzt risikolos umsteigen und Geld sparen!
  • +viele weitere Tipps im "Open-Source-Secrets" per e-Mail

Weitere Artikel zum Thema

Gratis: Linux Startpaket für Sie!

Jetzt gratis per E-Mail

  • + weitere Tipps im "Open-Source-Secrets" per e-Mail
DDV Qualitätsstandard E-Mail-Marketing
  • 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.
Unsere Experten

Rudolf Ring twittert für @Computerwissen

Die von Ihnen eingegebene E-Mail Adresse ist nicht korrekt. Bitte korrgieren Sie Ihre Eingabe und klicken Sie auf "OK":

Bitte wählen Sie mindestens einen Newsletter aus und klicken Sie auf "OK"