Erweitern Sie den Flowplayer um eine Playlist

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

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:

  1. 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“.
  2. 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“.
  3. 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>
  4. 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'

},

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"