Flow VideoPlayer - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Flow VideoPlayer

Scripte > Multimedia


Flow VideoPlayer für Flash & HTML5.

HTML5

Der Flowplayer ist ein Flashplayer, der ohne große Umstände in die Webseite eingebunden werden kann.
M
ehrere Videos können über einen Stream laufen, spielt neben Flashvideos auch Image-, MP3-, MP4- und H.264-Dateien ab.
Auch zur Präsentation von Texten in Verbindung mit Imagedateien eignet sich dieser hervorragend.

Zip-Datei entpacken und Verzeichnis "flowplayer" auf den Server laden. Dem Zip-Paket liegen keine Image- oder Videofiles bei.

Es werden hier nur einige Möglichkeiten gezeigt.
Weitere Anwendungsmöglichkeiten siehe Homepage:

Homepage flowplayer


Single Play Mode


Presentation Mode

Big Buck Bunny
Crazy Frog Popcorn


Code für den HEAD-Bereich:


<script src="flowplayer/flowplayer-3.2.6.min.js">
</script>


Code für den HEAD-Bereich:


<script src="flowplayer/flowplayer-3.2.6.min.js">
</script>


Code für das HTML-Objekt:

<a href="flowplayer/files/big_buck_bunny.flv"
style="display:block;width:400px;height:300px;" id="player1">
<img src="flowplayer/files/big_buck_bunny.jpg" alt="Big Buck Bunny" />
</a>
<script language="JavaScript">
flowplayer("player1", "flowplayer/flowplayer-3.2.7.swf");
</script>



Code für das HTML-Objekt:

<a href="media/files/big_buck_bunny.flv"
style="display:block;width:400px;height:300px;"
id="player2">
<img src="media/files/big_buck_bunny.jpg" alt="Crazy Frog Popcorn" />
</a>
<script language="JavaScript">
$f("player2", "media/flowplayer-3.2.7.swf", {
 clip: {
 
// Standard Abspieldauer
 duration: 8  
 },
 
// Playliste
 playlist: [
  
// JPG-Image
  '/images/demo_img5-sm.jpg',
  
// SWF-File
  {url: 'files/swf/clock.swf', scaling: 'fit'},
  
// Video-File
  'media/files/big_buck_bunny.flv',
  
// 2.Image, läuft auf Länge des Audio-MP3
  {url: 'images/demo_img6-sm.jpg', duration: 0},
  /
/ MP3-Audio, Audio-Plugin muss inst. sein
  {url: 'media/files/demo-techno.mp3', duration: 25}  
 ],
 
// Zeigt die Controlbar
 plugins:  {
  controls: {
  playlist: true,
  
// Controlbar mit anderer Hintergrundfarbe
  url: 'media/flowplayer.controls-3.2.5.swf',
  backgroundColor: '#aedaff'
  }
 }
});
</script>

Individuelle Parameter:
playlist = Titelauflistung (true/false)
duration = Titellänge in Sekunden


Multible Players

Demo Video 1 Demo Video 2 Demo Video 3 Demo Video 4


Code für den HEAD-Bereich:


<script src="flowplayer/flowplayer-3.2.6.min.js">
</script>


Code für den CSS-Bereich:


a.Player {
 display:block;
 width: 400px;
 height:300px;
 text-align:center;
 margin:5px 10px 10px 0;
 float:left;
 border:1px solid #999;
}
a.Player img {
 margin-top:70px;
 border:0px;
}
a.Player:hover {
 border:1px solid #000;
}



Code für das HTML-Objekt:


<!-- Player #1 -->
<a class="Player" href="flowplayer/files/big_buck_bunny.flv"
 style="background-image:url(flowplayer/files/big_buck_bunny.jpg)">
<img src="media/play.png" alt="Demo Video 1"/></a>

<!-- Player #2 -->
<a class="Player" href="flowplayer/files/pixar_jungle.flv"
 style="background-image:url(flowplayer/files/pixar_jungle.jpg)">
<img src="media/play.png" alt="Demo Video 2"/></a>

<!-- Player #3 -->
<a class="Player" href="flowplayer/files/crazy_frog_champions.flv"
 style="background-image:url(flowplayer/files/crazy_frog_champions.jpg)">
<img src="media/play.png" alt="Demo Video 3"/></a>

<!-- Player #4 -->
<a class="Player" href="flowplayer/files/crazy_frog_popcorn.flv"
 style="background-image:url(flowplayer/files/crazy_frog_popcorn.jpg)">
<img src="media/play.png" alt="Demo Video 4"/></a>
<br clear="all" />

<script language="JavaScript">
flowplayer("a.Player", "flowplayer/flowplayer-3.2.7.swf", {
 plugins:  {
  controls:  {
   volume: false  
  }
 }
});</script>


Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2017




  Besucher Statistik
 » 17 Online
 » 79 Heute
 » 304 Woche
 » 2462 Monat
 » 66452 Jahr
 » 242752 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü