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>

 

Die besten Linux- und OpenSource Tipps für Sie!

Jetzt gratis per E-Mail

DDV Ehrencodex 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 Datenschutzgarantie:

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.

Weitere Artikel zum Thema

Die besten Linux- und OpenSource Tipps für Sie!

Jetzt gratis per E-Mail

  • die besten Tipps
  • völlig kostenlos
  • jederzeit abbestellbar
DDV Ehrencodex 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 Datenschutzgarantie:

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"