jplayer in GX2 einbauen, aber wie?

**Tonkutscher** · 08.08.2014, 17:05

Hallo zusammen, betreibe eine Download Music Library für Filmschaffende. Als Vorhörmöglichkeit für die mp3s nutze ich zZ einen flashplayer. Das schließt leider die Mac User aus, deswegen will ich den jplayer einbauen. Meine Frage ist nur wie? Er nutzt jquery. Wo muss der Code rein? Bin leider programmiermäßig nicht bewandert. Hat jemand damit Erfahrung?

***KlausK*** · 09.08.2014, 22:00

Eine Installationsanleitung solltest du auf den Seiten der Player-Autoren finden.
Der Code, der letzten Endes den Player anzeigt, wird einfach innerhalb der Beschreibung platziert.
Dazu klickst du im CK-Editor einfach auf Quellcode.
Dann den Player-Code an gewünschter Stelle einfügen.
Dann nochmal auf Quellcode klicken und der Player wird angezeigt.

**Tonkutscher** · 26.08.2014, 16:39

Hi Klaus, war leider arbeitstechnisch zu eingespannt. Daher erst jetzt...
Also ich habe genau nach Anleitung des Herstellers den php-code eingebaut, allerdings,wie hier oft beschrieben in die bottom.php. Dann den [audio] tag in die Produktbeschreibung eingefügt. Wenn ich jetzt die Seite aufrufe, blitzt kurz der player auf und verschwindet sofort wieder. Versteht GX2 kein html 5?? Wäre echt sch.... Denn dann blieben alle iOS-Geräte außenvor!

***KlausK*** · 26.08.2014, 19:51

Was für'n PHP-Code?
Der jPlayer ist ein reiner Javascript-Player mit ein paar Flash-Komponenten. Das hat nix mit PHP zutun.
Oder gibt es noch einen anderen jPlayer!?
Javascript wird übrigens in HTML eingebettet. PHP-Scripte können mit dem Zeug auch nicht viel anfangen.
Poste doch bitte mal den Code, den du verwenden willst.

**Tonkutscher** · 27.08.2014, 14:43

Also ich beim Lesen der Anleitung zum jPlayer auch darüber gestolpert. Nun bin ich programmiertechnisch eher Flachzange und hab mich im Netz etwas belesen. Auf mehreren PHP-Seiten hieß es man könne Javascrip in php einbinden und dann mit "echo" aufrufen. Meine Versuche waren allerdings erfolglos.
Hier der Code:

Code:

/* audio.js player code */
echo '<script language="JavaScript" type="text/javascript"><script src="/audiojs/audio.min.js"></script>;
		<script language="JavaScript" type="text/javascript">audiojs.events.ready(function() {
			var as = audiojs.createAll();
		});
	</script>';

Der Player selbst soll dann in der Kurzbeschreibung mit dem HTML5 Audio-Tag aufgerufen werden: [audio]. Nun erscheint das Phänomen wie oben beschrieben. Ich hab nach ein paar Versuchen den Code wieder entfernt. Interessanter Weise verhält sich GX2 mit dem HTML5 Audio-Tag genauso, auch ohne das jPlayer-Script. Daher keimt bei mir der Verdacht, das GX2 generell ein Problem mit html 5 hat. Das wäre sehr traurig, da ein html 5-Player die einzige Lösung zu sein scheint, um iOS-Geräte mit einzubeziehen. Flash ist nun mal eine Einbahnstraße.

**berny** · 27.08.2014, 16:25

Sehe dir mal an, was das echo im Seiten-Quelltext überhaupt ausgibt, womöglich sind irgendwelche Zeichen falsch, sodass das script nicht funktionieren kann....

***KlausK*** · 28.08.2014, 00:30

Meinst du das so?
http://www.kindermoebel-24.de/shop13...e/jPlayer.html

Den JavaScript-Teil habe ich unter Tracking-Codes abgelegt.
Dieser wird (glaube ich) von der application_top.php verarbeitet.
Da die PHP-Scripte aber ständigen Updates unterliegen, macht es keinen Sinn solche Sachen in ein PHP-Script zu stecken.

Den HTML-Teil habe ich wie schon beschrieben ins Feld Artikelbeschreibung gesteckt.

**Tonkutscher** · 29.08.2014, 17:16

Was meinst du mit Tracking Codes? Was, wie, wo? Leider kann ich dein Beispiel nicht ansehen, weil die Seite passwortgeschützt ist.

***KlausK*** · 29.08.2014, 20:24

Das ist mein Testshop. Da bastel ich ständig dran rum und setze den zwischendurch wieder zurück.
Ich bin auch davon ausgegangen, dass du wenigstens innerhalb von 24 Stunden einmal hier rein schaust.
Ich lasse den jetzt ein paar Stunden länger offen, damit du gucken kannst.
Sag bescheid, wenn du fertig bist.

Folgendes Paket habe ich runter geladen: http://jplayer.org/latest/jQuery.jPl....6.0.demos.zip
Entpackt und die Unterverzeichnisse js und skin ins Hauptverzeichnis des Shops hochgeladen.
Die Demo-HTML's brauchst du natürlich nicht mit hochladen.

In diesem Beispiel habe ich mir die demo-02-bm.htm vorgenommen.

Hier kannst du gucken: http://www.kindermoebel-24.de/shop13...e/jPlayer.html

In Adminbereich >>> Gambio SEO >>> Tracking-Codes habe ich den Scriptteil kopiert:

HTML-Code:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

	new jPlayerPlaylist({
		jPlayer: "#jquery_jplayer_1",
		cssSelectorAncestor: "#jp_container_1"
	}, [
		{
			title:"Cro Magnon Man",
			mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
			oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
		},
		{
			title:"Your Face",
			mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
			oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
		},
		{
			title:"Cyber Sonnet",
			mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
			oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
		},
		{
			title:"Tempered Song",
			mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
			oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"
		},
		{
			title:"Hidden",
			mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
			oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
		},
		{
			title:"Lentement",
			free:true,
			mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
			oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg"
		},
		{
			title:"Lismore",
			mp3:"http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3",
			oga:"http://www.jplayer.org/audio/ogg/Miaow-04-Lismore.ogg"
		},
		{
			title:"The Separation",
			mp3:"http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3",
			oga:"http://www.jplayer.org/audio/ogg/Miaow-05-The-separation.ogg"
		},
		{
			title:"Beside Me",
			mp3:"http://www.jplayer.org/audio/mp3/Miaow-06-Beside-me.mp3",
			oga:"http://www.jplayer.org/audio/ogg/Miaow-06-Beside-me.ogg"
		},
		{
			title:"Bubble",
			free:true,
			mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
			oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
		},
		{
			title:"Stirring of a Fool",
			mp3:"http://www.jplayer.org/audio/mp3/Miaow-08-Stirring-of-a-fool.mp3",
			oga:"http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"
		},
		{
			title:"Partir",
			free: true,
			mp3:"http://www.jplayer.org/audio/mp3/Miaow-09-Partir.mp3",
			oga:"http://www.jplayer.org/audio/ogg/Miaow-09-Partir.ogg"
		},
		{
			title:"Thin Ice",
			mp3:"http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3",
			oga:"http://www.jplayer.org/audio/ogg/Miaow-10-Thin-ice.ogg"
		}
	], {
		swfPath: "js",
		supplied: "oga, mp3",
		wmode: "window",
		smoothPlayBar: true,
		keyEnabled: true
	});
});
//]]>
</script>

In der Produktbeschreibung habe ich diesen Teil eingefügt:

HTML-Code:

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

		<div id="jp_container_1" 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>

**Tonkutscher** · 30.08.2014, 01:10

Okay, danke. Werde das am WE mal ausprobieren. Habe deine Seite gesehen, kannst sie wieder dicht machen.

Thema: jplayer in GX2 einbauen, aber wie?

Themen-Optionen

Thema durchsuchen

Anzeige

jplayer in GX2 einbauen, aber wie?

AW: jplayer in GX2 einbauen, aber wie?

AW: jplayer in GX2 einbauen, aber wie?

AW: jplayer in GX2 einbauen, aber wie?

AW: jplayer in GX2 einbauen, aber wie?

AW: jplayer in GX2 einbauen, aber wie?

AW: jplayer in GX2 einbauen, aber wie?

AW: jplayer in GX2 einbauen, aber wie?

AW: jplayer in GX2 einbauen, aber wie?

AW: jplayer in GX2 einbauen, aber wie?

Ähnliche Themen

Facebook-Likebox in Extrabox des gambio einbauen

jplayer in GX2 einbinden, wie geht das?

Eyecandy: Bild neben Hauptseite einbauen

Gambio GX: Neues Template aber falsche Schriftfarbe

Individuelle Texte (aber wie viele Worte und wo?)

Stichworte

Berechtigungen