Binden Sie ihre Videos auf Ihrer Homepage ein

am 03.07.2009

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>

Gratis-DVD: Die aktuellste Version von Ubuntu, dem beliebten Kult-Linux
Verabschieden Sie sich von typischen Windowsfehlern wie Sicherheitsproblemen, Systemfehlern, Blue Screens und Virenattacken!
Klicken Sie hier für Ihr Gratis-Rundum-Sorglos-Paket!

Per E-Mail versenden

Abspeichern & Bookmarken
- schließen [x]
- Favoriten
- del.icio.us
- digg.com
- Diigo
- Facebook
- google.com
- Mister Wong
- stumbleupon.com
- Technorati
- Twitter
- Webnews
- YahooMyWeb
- YiggIt

RSS

Newsletter

Ähnliche

Das Neueste aus dem ComputerWissen NET (?)

Kommentieren Sie jetzt diesen Artikel

Top 5 Stichwörter

Binden Sie ihre Videos auf Ihrer Homepage ein

Windows

Office

Hardware & Software

Einsteiger

Bildbearbeitung & Video

Administration

Internet & Lifestyle

Datenbank

Unsere Artikel
kostenlos auf
Ihrer Webseite

Binden Sie ihre Videos auf Ihrer Homepage ein

Windows

Office

Hardware & Software

Einsteiger

Bildbearbeitung & Video

Administration

Internet & Lifestyle

Datenbank

Unsere Artikelkostenlos aufIhrer Webseite

Unsere Artikel
kostenlos auf
Ihrer Webseite