Der Flowplayer - Einbau und Konfiguration

Vorbemerkung

Bei den hier verwendeten Beispielen sind die Dateien im öffentlichen Dropbox-Ordner abgelegt.

Der FlowPlayer ist ein Flashplayer, der Flashvideos abspielt. Es ist also notwendig, Videos der Formate avi, wmv, mp4 usw. in das Flashformat flv umzuwandeln, wenn man sie mit dem FlowPlayer wiedergeben möchte.

Die hier demonstrierten Beispiele verwenden den Flowplayer 3.2.11 und die JavaScript-Datei flowplayer-3.2.10.min.js.

In jedem Fall muss die Flowplayer-JavaScript-Datei eingebunden werden:

<script type="text/javascript" src="/js/flowplayer-3.2.10.min.js"></script>

Player 1 Einfachst-Variante Einbindung mit <a>-Tag

Hier wird das abzuspielende Video mit Hilfe des Link-Tags eingebunden. Dabei wird das abzuspielende Video bereits als href-Atttribut angegeben.

Beispielcode

<a href="https://dl.dropboxusercontent.com/u/6132182/droppages/meine/medien/flv/WindowsXPProfessionalMovie.flv" style="display:block;width:520px;height:330px"  id="player1"> 
</a>
<script>
flowplayer("player1", "https://dl.dropboxusercontent.com/u/6132182/droppages/meine/flowplayer/flowplayer-3.2.11.swf");
</script>

Anzeige des Beispiels

Player 2 Einbindung mit <div>-Tag

Bei der Einbindung mit einem div-Tag wird zuerst der leere div-Layer angelegt, der JavaSvript-Aufruf muss dann als letztes Element die abzuspielende flv-Datei enthalten.

Beispielcode

<div style="width:425px;height:300px;margin:0 auto;" id="player2"></div>
<script>
flowplayer("player2", "https://dl.dropboxusercontent.com/u/6132182/droppages/meine/flowplayer/flowplayer-3.2.11.swf", "https://dl.dropboxusercontent.com/u/6132182/droppages/meine/medien/flv/flowplayer_cues.flv");
</script>

Anzeige des Beispiels

Player 3 Steuerung mit der JavaScript-Api

Der Flowplayer enthält eine enorme Anzahl von Steuerungs- und Konfigurationsmöglichkeiten. Diese werden jeweils über die JavaScript-Api angesprochen. Bei diesem Beispiel wird gezeigt, wie

  • man den Player anhält und wieder in Gang setzt
  • zwischen unterschiedlichen flv-Videos hin- und herschaltet.

Beispielcode

<div style="width:425px;height:300px;margin:0 auto;" id="player3"></div>
<script>
var myplayer = flowplayer("player3","https://dl.dropboxusercontent.com/u/6132182/droppages/meine/flowplayer/flowplayer-3.2.11.swf","https://dl.dropboxusercontent.com/u/6132182/droppages/meine/medien/flv/flowplayer_cues.flv");
</script>
<button onClick="myplayer.pause();">Pause</button>
<button onClick="myplayer.play();">Play</button>
<button onClick="myplayer.play('https://dl.dropboxusercontent.com/u/6132182/droppages/meine/medien/flv/flowplayer_cues.flv');">Clip1</button>
<button onClick="myplayer.play('https://dl.dropboxusercontent.com/u/6132182/droppages/meine/medien/flv/tinku_hip_hop_bolivia.flv');">Clip2</button>
<button onClick="myplayer.play('https://dl.dropboxusercontent.com/u/6132182/droppages/meine/medien/flv/Rammstein.flv');">Clip3</button>
<p><img border="0" src="/images/showme.png" width="125" height="40" onClick="player.play('/flv/InstallationDFM2HTML.flv');"></p>

Anzeige des Beispiels

Dieses Beispiel funktioniert zurzeit leider nicht.