Erweitern Sie den Flowplayer um eine Playlist
Komfortabel: Statt jedes Video mit einem eigenen Player einzubinden, können Sie mehrere Videos in einer Playlist zusammenfassen
Für den Flowplayer stehen diverse Plug-ins bereit, mit denen sich der Funktionsumfang des Players erweitern lässt. Nachfolgendes Beispiel zeigt die Implementierung einer Playlist. So haben Sie die Möglichkeit, mehrere Videos in einer Auswahlliste bereitzustellen; ein Klick auf einen Listeneintrag startet dann jeweils automatisch die Wiedergabe des zugehörigen Clips:
- Laden Sie zunächst unter der Adresse http://flowplayer.org/plugins/javascript/playlist.html#download die Datei flowplayer.playlist-3.0.5.min.js herunter sowie unter der Rubrik „CSS coding“ die Datei playlist.css und speichern Sie diese in einem beliebigen Verzeichnis auf Ihrem Webserver. Im Beispiel im Verzeichnis „flowplayer“.
- Des Weiteren benötigen Sie das JavaScript-Framwork jQuery; Laden Sie das Script unter der Adresse http://docs.jquery.com/Downloading_jQuery in der „Minified“-Version herunter und speichern Sie dies ebenfalls auf Ihrem Internetserver. Im Beispiel im Verzeichnis „flowplayer“.
- Im nächsten Schritt binden Sie die JavaScript/CSS-Dateien im <head>Bereich Ihrer Seite ein sowie das Stylesheet für die Darstellung der Playlist (playlist.css). Achten Sie darauf, die jQuery-Bibliothek vor allen anderen Skripten einzubinden:
<script src="flowplayer/jquery-1.3.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="flowplayer/playlist.css" />
Um die Playlist auf der HTML-Seite anzuzeigen, fügen Sie den folgenden HTML-Code unmittelbar vor dem Platzhalter für die Anzeige des Players ein:
<div class="clips" style="float:left;margin-right:15px">
<a>
${title} <span>${url}</span>
<em>${duration} seconds</em>
</a>
</div> - Zu guter Letzt fügen Sie noch die entsprechende JavaScript-Funktion ein, die die Playlist mit den benötigten Informationen befüllt. Wichtig ist dabei, dass Sie unter „baseUrl:“ die IP-Adresse respektive die Domain Ihres Webservers nebst Verzeichnispfad zu Ihren Videos eintragen. Im Beispiel liegen die Videos im Unterverzeichnis „website“ des Servers. Dessen lokale IP-Adresse lautet im Beispiel 192.168.136.130. Die korrekte Basis-URL lautet demnach 192.168.136.130/website.
Ein einfaches Seitengerüst, dass sowohl den Player als auch eine Playlist implementiert, sieht im Beispiel wie folgt aus:
<!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/jquery-1.3.2.min.js"></script>
<script src="flowplayer/example/flowplayer-3.0.6.min.js"></script>
<script src="flowplayer/flowplayer.playlist-3.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="flowplayer/playlist.css" />
<title>Seite mit Flash-Video</title>
<script type="text/javascript">
$(function() {
$f("player", "flowplayer/flowplayer-3.0.7.swf", {
//Allgemeine Angaben alle Videos betreffend
clip: {
baseUrl: 'http://192.168.136.130/website',
subTitle: 'Meine Screencast-Seite',
time: '20 sec'
},
// Füllen der Playlist mit Einträgen
playlist: [
url: 'flashvideo.flv',
title: 'Mein erster Screencast',
time: '10 sec'
},
{
url: 'flashvideo_2.flv',
title: 'Mein zweiter Screencast',
time: '17 sec'
},
{
url: 'flashvideo_3.flv',
title: 'Mein dritter Screencast',
time: '30 sec'
}
],
plugins: {
controls: {
playlist: true
}
}
});
$f("player").playlist("div.clips:first", {loop:true});
});
</script>
</head>
<body>
<div class="clips" style="float:left">
<a href="${url}">
${title} <span>${subTitle}</span>
<em>${time}</em>
</a>
</div>
<a style="display:block;width:720px;height:576px;float:left;" id="player">
</a>
</body>
</html>
Um der Playlist weitere Videos hinzuzufügen, genügt es, im Abschnitt „playlist“ einen Block nach folgendem Schema zu ergänzen:
{
url: 'Name_der_Videodatei.flv',
title: 'Titel_des_Videos_in_der_Playlist',
time: 'Spielzeit_des_Videos'
},
|
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! |
Kommentieren Sie jetzt diesen Artikel