1. Resources vorbereiten:

  • drei Ordner in Resources erstellen - Medienplayer, Medien als Skin des Players blue.monday
    RapidWeaverSchnappschuss001
    RapidWeaverSchnappschuss002
  • Aus dem Download-Bereich das Demo-Paket runterladen und entpacken.
    Aus dem Ordner js werden die Dateien jplayer.playlist.min.js und jquery.jplayer.min.js in Medienplayer Ordner geschoben, dann alle Dateien die in dem skin/blue.monday Ordner sich befinden in blue.monday Ordner.
    U.U. die Formate der Medien-Dateien mit dem Miro Video Converter bearbeiten und in Medien verschieben:
    RapidWeaverSchnappschuss003
  • Publizieren!

2. Code einbinden:

a. zuerst die JavaScript Dateien einbinden

<link href="%resource(Medienplayer/blue.monday/jplayer.blue.monday.css)%" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="%resource(Medienplayer/jquery.jplayer.min.js)%"></script>
<script type="text/javascript" src="%resource(Medienplayer/jplayer.playlist.min.js)%"></script>

b. dann die Medien als JavaScript Code

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

	new jPlayerPlaylist({
		jPlayer: "#jquery_jplayer_1",
		cssSelectorAncestor: "#jp_container_1"
	}, [
		{
			title:"Ratatouille Trailer",
			artist:"Walt Disney",
			free:true,
			m4v: "%base_url%resources/Medien/ratatouille_320-144.m4v",
			ogv: "%base_url%resources/Medien/ratatouille_320-144.theora.ogv",
			webmv: "%base_url%resources/Medien/ratatouille_320-144.webm",
			poster:"%base_url%resources/Medien/ratatouille_320-144.jpg"
		},
		{
			title:"Finding Nemo Teaser",
			artist:"Pixar",
			free:true,
			m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v",
			ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv",
			webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm",
			poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
		},
		{
			title:"Startrek Trailer",
			artist:"Paramount Pictures",
			free:true,
			m4v: "%base_url%resources/Medien/startrek-tlr2_h.480.m4v",
			ogv: "%base_url%resources/Medien/startrek-tlr2_h.480.theora.ogv",
			webmv: "%base_url%resources/Medien/startrek-tlr2_h.480.webm",
			poster:"%base_url%resources/Medien/startrek-tlr2_h.480.jpg"
		}
	], {
		swfPath: "%base_url%resources/Medienplayer",
		supplied: "webmv, ogv, m4v"
	});
});
//]]>
</script>

c. dann das Player als HTML Code

<div id="jp_container_1" class="jp-video jp-video-270p">
	<div class="jp-type-playlist">
		<div id="jquery_jplayer_1" class="jp-jplayer"></div>
		<div class="jp-gui">
			<div class="jp-video-play">
				<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
			</div>
			<div class="jp-interface">
				<div class="jp-progress">
					<div class="jp-seek-bar">
						<div class="jp-play-bar"></div>
					</div>
				</div>
				<div class="jp-current-time"></div>
				<div class="jp-duration"></div>
				<div class="jp-controls-holder">
					<ul class="jp-controls">
						<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
						<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
						<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
						<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
						<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
						<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
						<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
						<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
					</ul>
					<div class="jp-volume-bar">
						<div class="jp-volume-bar-value"></div>
					</div>
					<ul class="jp-toggles">
						<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
						<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
						<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
						<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
						<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
						<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
					</ul>
				</div>
				<div class="jp-title">
					<ul>
						<li></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="jp-playlist">
			<ul>
				<!-- The method Playlist.displayPlaylist() uses this unordered list -->
				<li></li>
			</ul>
		</div>
		<div class="jp-no-solution">
			<span>Update Required</span>
			To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
		</div>
	</div>
</div>

d. u.U. etwas CSS Code

div.jp-title,
div.jp-playlist {
	font-size: 1.3em;
}
div.jp-playlist ul {
	list-style-type:none !important;
}
div.jp-video div.jp-type-playlist ul.jp-controls {
	margin-left: 172px !important;
}

e. einige Anmerkungen

  • Der Code in 2.a. benutzt die RapidWeaver-Funktion %resource()%
  • Der Code in 2.b. benutzt die RapidWeaver-Funktion %base_url% deswegen man muss nach dem ersten Schritt publizieren (damit RapidWeaver die Abspieldateien vom Server holt).

2. Zwei Player pro Seite:

a. die Einbindung der JavaScript Dateien bleibt weiterhin gleich

<link href="%resource(Medienplayer/blue.monday/jplayer.blue.monday.css)%" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="%resource(Medienplayer/jquery.jplayer.min.js)%"></script>
<script type="text/javascript" src="%resource(Medienplayer/jplayer.playlist.min.js)%"></script>

b. in dem JavaScript Code für die Medien werden jedem Player (die Player werden nummeriert) die Medien zugewiesen:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

	new jPlayerPlaylist({
		jPlayer: "#jquery_jplayer_1",
		cssSelectorAncestor: "#jp_container_1"
	}, [
		{
			title:"Ratatouille Trailer",
			artist:"Walt Disney",
			free:true,
			m4v: "%base_url%resources/Medien/ratatouille_320-144.m4v",
			ogv: "%base_url%resources/Medien/ratatouille_320-144.theora.ogv",
			webmv: "%base_url%resources/Medien/ratatouille_320-144.webm",
			poster:"%base_url%resources/Medien/ratatouille_320-144.jpg"
		},
		{
			title:"Finding Nemo Teaser",
			artist:"Pixar",
			free:true,
			m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v",
			ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv",
			webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm",
			poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
		},
		{
			title:"Startrek Trailer",
			artist:"Paramount Pictures",
			free:true,
			m4v: "%base_url%resources/Medien/startrek-tlr2_h.480.m4v",
			ogv: "%base_url%resources/Medien/startrek-tlr2_h.480.theora.ogv",
			webmv: "%base_url%resources/Medien/startrek-tlr2_h.480.webm",
			poster:"%base_url%resources/Medien/startrek-tlr2_h.480.jpg"
		}
	], {
		swfPath: "%base_url%resources/Medienplayer",
		supplied: "webmv, ogv, m4v"
	});


	new jPlayerPlaylist({
		jPlayer: "#jquery_jplayer_2",
		cssSelectorAncestor: "#jp_container_2"
	}, [
		{
			title:"Haydn, "Lerchenquartett" - I. Allegro moderato",
			mp3:"%base_url%resources/Medien/I_Allegro_moderato.mp3"
		},
		{
			title:"Haydn, "Lerchenquartett" - II. Adagio",
			mp3:"%base_url%resources/Medien/II_Adagio.mp3"
		},
		{
			title:"Haydn, "Lerchenquartett" - III. Menuet Allegretto",
			mp3:"%base_url%resources/Medien/III_Menuet_Allegretto.mp3"
		},
		{
			title:"Haydn, "Lerchenquartett" - IV. Finale Vivace",
			mp3:"%base_url%resources/Medien/IV_Finale_Vivace.mp3"
		}
	], {
		swfPath: "%base_url%resources/Medienplayer",
		supplied: "mp3",
		wmode: "window"
	});
});
//]]>
</script>

c. dann die zwei Player als HTML Code

<div id="jp_container_1" class="jp-video jp-video-270p">
	<div class="jp-type-playlist">
		<div id="jquery_jplayer_1" class="jp-jplayer"></div>
		<div class="jp-gui">
			<div class="jp-video-play">
				<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
			</div>
			<div class="jp-interface">
				<div class="jp-progress">
					<div class="jp-seek-bar">
						<div class="jp-play-bar"></div>
					</div>
				</div>
				<div class="jp-current-time"></div>
				<div class="jp-duration"></div>
				<div class="jp-controls-holder">
					<ul class="jp-controls">
						<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
						<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
						<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
						<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
						<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
						<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
						<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
						<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
					</ul>
					<div class="jp-volume-bar">
						<div class="jp-volume-bar-value"></div>
					</div>
					<ul class="jp-toggles">
						<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
						<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
						<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
						<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
						<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
						<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
					</ul>
				</div>
				<div class="jp-title">
					<ul>
						<li></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="jp-playlist">
			<ul>
				<!-- The method Playlist.displayPlaylist() uses this unordered list -->
				<li></li>
			</ul>
		</div>
		<div class="jp-no-solution">
			<span>Update Required</span>
			To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
		</div>
	</div>
</div>

<div id="jquery_jplayer_2" class="jp-jplayer"></div>

<div id="jp_container_2" class="jp-audio">
	<div class="jp-type-playlist">
		<div class="jp-gui jp-interface">
			<ul class="jp-controls">
				<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
				<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
				<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
				<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
				<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
				<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
				<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
				<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
			</ul>
			<div class="jp-progress">
				<div class="jp-seek-bar">
					<div class="jp-play-bar"></div>
				</div>
			</div>
			<div class="jp-volume-bar">
				<div class="jp-volume-bar-value"></div>
			</div>
			<div class="jp-time-holder">
				<div class="jp-current-time"></div>
				<div class="jp-duration"></div>
			</div>
			<ul class="jp-toggles">
				<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
				<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
				<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
				<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
			</ul>
		</div>
		<div class="jp-playlist">
			<ul>
				<li></li>
			</ul>
		</div>
		<div class="jp-no-solution">
			<span>Update Required</span>
			To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
		</div>
	</div>
</div>

d. am Schluß, u.U. etwas CSS Code

div.jp-title,
div.jp-playlist {
	font-size: 1.3em;
}
div.jp-playlist ul {
	list-style-type:none !important;
}
div.jp-video div.jp-type-playlist ul.jp-controls {
	margin-left: 172px !important;
}
ul.jp-toggles {
	margin: 10px auto 0 !important;
}
div.jp-audio {
	width:480px !important;
	margin-top: 25px;
}
div.jp-audio div.jp-progress {
	left: 185px  !important;
}
div.jp-audio div.jp-time-holder {
	left: 185px !important;
}