Platz für JW Player

1. Resources vorbereiten:

  • zwei Ordner in Resources erstellen (Medienplayer und Medien als Beispiel)
    RapidWeaverSchnappschuss001
    RapidWeaverSchnappschuss002
  • Die Dateien des Players in Medienplayer-Ordner verschieben und die Medien in Medien-Ordner:
    RapidWeaverSchnappschuss003

2. Code um den von JW Player mitgelieferten Video abzuspielen:


<div id="mediaplayer">Platz für JW Player</div>

<script type="text/javascript" src="%resource(Medienplayer/jwplayer.js)%"></script>
<script type="text/javascript">
	jwplayer("mediaplayer").setup({
		flashplayer: "%resource(Medienplayer/player.swf)%",
		file: "%resource(Medienplayer/video.mp4)%",
		image: "%resource(Medienplayer/preview.jpg)%"
	});
</script>
<!-- END OF THE PLAYER EMBEDDING -->

3. Mehrere Player

a. mehrere verschiedene Player

Platz für JW Player 1

Platz für JW Player 2

Wie man aus dem vorherigen Code sieht, VOR dem Code des Players (ab dem <script) wird ein Bereich (<div) mit einer ID.
Möchte man MEHRERE Player auf einer Seite müssen SOWOHL die IDs der Bereiche ALS AUCH jwplayer setup VERSCHIEDENE Namen haben (siehe unten den Code):

<div id="video1">Platz für JW Player 1</div>
<script type="text/javascript" src="%resource(Medienplayer/jwplayer.js)%"></script>
<script type="text/javascript">
  jwplayer("video1").setup({
		flashplayer: "%resource(Medienplayer/player.swf)%",
		file: "%resource(Medien/ratatouille_320-144.m4v)%",
		image: "%resource(Medien/ratatouille_320-144.jpg)%"
    });
</script>
<br />
<div id="video2">Platz für JW Player 2</div>
<script type="text/javascript" src="%resource(Medienplayer/jwplayer.js)%"></script>
<script type="text/javascript">
  jwplayer("video2").setup({
		flashplayer: "%resource(Medienplayer/player.swf)%",
		file: "%resource(Medien/startrek-tlr2_h.480.mov)%",
		image: "%resource(Medien/startrek-tlr2_h.480.jpg)%"
    });
</script>

b. Player mit Playlist

<script type="text/javascript" src="resource(Medienplayer/jwplayer.js)%"></script>

<div id="playerlist"></div>

<script type="text/javascript">
  jwplayer("playerlist").setup({
    "flashplayer": "%resource(Medienplayer/player.swf)%",
    "id": "playerID",
    "width": "720",
    "height": "240",
    "playlist.position": "right",
    "playlist.size": "250",
    "playlist": [
        {
           "file": "%resource(Medien/ratatouille_320-144.m4v)%",
           "title": "Ratatouille Trailer",
           "image": "%resource(Medien/ratatouille_320-144.jpg)%",
           "duration": "108",
           "description": "Ratatouille erzählt die Geschichte der kleinen Landratte Remy, die mit all ihren Verwandten ein beschauliches Leben in der französischen Provinz lebt."
        },
        {
           "file": "%resource(Medien/startrek-tlr2_h.480.mov)%",
           "title": "Startrek Trailer",
           "image": "%resource(Medien/startrek-tlr2_h.480.jpg)%",
           "duration": "133",
           "description": "Der Weltraum - unendliche Weiten: Zum elften Mal startet die Crew um Captain Kirk auf der USS Enterprise zu einer Reise in die Tiefen des Universums. In dieser Verfilmung zeichnet Regisseur J.J. Abrams die frühen Jahre der Enterprise-Crew nach."
        }
    ]
  });
</script>