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.
-
Video mit Flowplayer
-
Werbung
Weitere Links
-
Suche
-
Partner
-
Blogs
-
Impressum / Kontakt