Frohe Ostern Gambio-Experts! Ich plane die Einbindung eines html5 Audio Players (jPlayer) um die Previews meiner Musik-Downloads abzuspielen. Der Player soll in der Artikelbeschreibung, als auch in der Kurzbeschreibung eingebunden werden. Meine Bemühungen scheiterten bereits, beim Auffinden des Shop-Headers... der Code des Players sieht wie folgt aus (3-Player Beispiel): HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Demo : Multi instanced jPlayer audio players</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="JPlayer/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="JPlayer/lib/jquery.min.js"></script> <script type="text/javascript" src="JPlayer/dist/jplayer/jquery.jplayer.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { title: "Stirring of a fool", m4a: "http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a", oga: "http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg" }); }, play: function() { // To avoid multiple jPlayers playing together. $(this).jPlayer("pauseOthers"); }, swfPath: "JPlayer/js", supplied: "m4a, oga", wmode: "window", globalVolume: true, useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true }); $("#jquery_jplayer_2").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { title: "Hidden", m4a: "http://www.jplayer.org/audio/m4a/Miaow-02-Hidden.m4a", oga: "http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg" }); }, play: function() { // To avoid multiple jPlayers playing together. $(this).jPlayer("pauseOthers"); }, swfPath: "JPlayer/js", supplied: "m4a, oga", cssSelectorAncestor: "#jp_container_2", wmode: "window", globalVolume: true, useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true }); $("#jquery_jplayer_3").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { title: "Bubble", m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a", oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg" }); }, play: function() { // To avoid multiple jPlayers playing together. $(this).jPlayer("pauseOthers"); }, swfPath: "JPlayer/js", supplied: "m4a, oga", cssSelectorAncestor: "#jp_container_3", wmode: "window", globalVolume: true, useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true }); }); //]]> </script> </head> <body> <div id="jquery_jplayer_1" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player"> <div class="jp-type-single"> <div class="jp-gui jp-interface"> <div class="jp-controls"> <button class="jp-play" role="button" tabindex="0">play</button> <button class="jp-stop" role="button" tabindex="0">stop</button> </div> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-volume-controls"> <button class="jp-mute" role="button" tabindex="0">mute</button> <button class="jp-volume-max" role="button" tabindex="0">max volume</button> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> </div> <div class="jp-time-holder"> <div class="jp-current-time" role="timer" aria-label="time"> </div> <div class="jp-duration" role="timer" aria-label="duration"> </div> <div class="jp-toggles"> <button class="jp-repeat" role="button" tabindex="0">repeat</button> </div> </div> </div> <div class="jp-details"> <div class="jp-title" aria-label="title"> </div> </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" role="application" aria-label="media player"> <div class="jp-type-single"> <div class="jp-gui jp-interface"> <div class="jp-controls"> <button class="jp-play" role="button" tabindex="0">play</button> <button class="jp-stop" role="button" tabindex="0">stop</button> </div> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-volume-controls"> <button class="jp-mute" role="button" tabindex="0">mute</button> <button class="jp-volume-max" role="button" tabindex="0">max volume</button> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> </div> <div class="jp-time-holder"> <div class="jp-current-time" role="timer" aria-label="time"> </div> <div class="jp-duration" role="timer" aria-label="duration"> </div> <div class="jp-toggles"> <button class="jp-repeat" role="button" tabindex="0">repeat</button> </div> </div> </div> <div class="jp-details"> <div class="jp-title" aria-label="title"> </div> </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_3" class="jp-jplayer"></div> <div id="jp_container_3" class="jp-audio" role="application" aria-label="media player"> <div class="jp-type-single"> <div class="jp-gui jp-interface"> <div class="jp-controls"> <button class="jp-play" role="button" tabindex="0">play</button> <button class="jp-stop" role="button" tabindex="0">stop</button> </div> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-volume-controls"> <button class="jp-mute" role="button" tabindex="0">mute</button> <button class="jp-volume-max" role="button" tabindex="0">max volume</button> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> </div> <div class="jp-time-holder"> <div class="jp-current-time" role="timer" aria-label="time"> </div> <div class="jp-duration" role="timer" aria-label="duration"> </div> <div class="jp-toggles"> <button class="jp-repeat" role="button" tabindex="0">repeat</button> </div> </div> </div> <div class="jp-details"> <div class="jp-title" aria-label="title"> </div> </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> </body> </html> Es handelt sich um ca 450 Musikstücke (Artikel) und kann mir noch nicht recht vorstellen, dass sich im Code des Headers 450 Verlinkungen zu den Mp3 Previews befinden... Über Hilfe zur Implementierung der ganzen Chose wäre ich unendlich dankbar. Vielen Dank im Voraus... Andreas
gibts auch ne anleitung vom anbieter wie man das am besten einbauen sollte? das CSS kannst in den USERMOD CSS Ordner legen beim JS ist es ähnlich beim rest müsste man mal die einzelnen Teile genauer kennen wie sich das zusammensetzt.
Diese Standard-Anleitungen können nicht funktionieren, da Gambio sich (leider, leider) dafür entschieden hat, jQuery erst in der application_bottom zu laden... Und weiter kommt dazu, dass die meisten Anleitungen selbst noch mal jQuery einbinden, was zu Konfilkten führt...
Vielen Dank für das erste Feedback! Wäre da die Suche nach einer Player-Alternative sinnvoll? Oder basieren die alle auf einem ähnlichen Aufbau? Eine erfolgreiche Einbindung des jPlayers in einem Gambio habe ich z.B. auf einer anderen Seite gefunden. Allerdings habe ich, wie gesagt, den header nicht gefunden, wo der erste Teil des Codes untergebracht wird.
2 Möglichkeiten. 1.Im Contentmanager einen Neuen Artikel Content anlegen und ein mp3 File zum Artikel laden. 2. Möglichkeit. PHP: <B><embed type="application/x-vlc-plugin" name="VLC" autoplay="yes"></B></><B><B><loop="no" volume="100" width="0" height="0" target="Hier den Pfad zur mp3 Datei eintragen"></B></B>
Wäre es nicht Speicherplatz schonender wenn du externe Dienste nutzt? Gibt doch genug MP3 Streaming anbieter mit player zum einbetten. Soundcloud oder so. Hätte den Vorteil das von da auch noch mal Suchtreffer bekommst und ggf. sogar Deeplinks zu den kmpletten MP3 in deinem Shop hinterlegen kannst. Nur so zum Kopfgedanken machen ob das nicht ne Möglichkeit wäre.
Nach längerem Ausprobieren habe ich jetzt den richtigen Player gefunden. Für mich ist eine individuelle Gestaltung des Payers wichtig gewesen, sodass Soundcloud und Co nicht in Betracht kamen. Folgenden Code habe ich in den Gambio Tracking-Codes Bereich kopiert (alles Andere findet im Artikel-Body statt...): Code: <script src="audioplayerengine/amazingaudioplayer.js"></script> <link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-1.css"><script src="audioplayerengine/initaudioplayer-1.js"></script> <link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-2.css"><script src="audioplayerengine/initaudioplayer-2.js"></script> Das sind die ersten zwei angelegten Artikel (Musiktitel) und alles läuft fluffig. Nun bin ich eher ein Code-Rookie ;-) ...muss ich davon ausgehen, für jede Player ID (insg. über 450 Musiktitel) eine Zuordnung in den Tracking-Codes Bereich zu schreiben? Wie würde sich das auf die Shop-Performance auswirken? Gibt es da eine elegantere Lösung? Vorab für Denkanstöße schon mal vielen Dank!
Die alle manuell im Tracking-Codes Bereich zu platzieren macht wenig Sinn, da man ja max. 1 Titel benötigt, und das auch nur in der Detailseite. Oder evtl auch im Artikellisting. D.h., da muss man durch Überladen der entsprechenden Module diese Links bei Bedarf generieren.
Vielen Dank für Dein Feedback, Avenger! Der Player wird pro Artikel in der Detailseite und auch in der Kurzbeschreibung für die Artikelliste angezeigt (10 Artikel pro Seite). Ich befürchte, das übersteigt meine Programmier-Kenntnisse... Wie groß wäre denn der Aufwand? Oder ist das eher ein Fall für freelancer.de o.Ä.?
Der "amazingaudioplayer" ist m.E. dafür auch nicht brauchbar, weil der ja fertige Player mit externen Programmen erstellt. Ich habe jetzt in einem Shop diese Player implementiert, der funktioniert gut, und ist schön kompakt... http://pupunzi.com/mb.components/mb.miniAudioPlayer/demo/demo.html Man muss sich nur überlegen, wie man die Sounddateien den Artikeln zuordnet. Evtl. als Produktmedia, um keine Änderungen dafür zu benötigen
Gefällt mir, der mb.miniAudioPlayer... verrätst Du mir, wie Du den Player eingebunden hast? Gibt es ein Code-Beispiel was ich mir mal ansehen könnte? Oggs müsste er ja auch lesen da er auf jPlayer basiert... richtig ? (würde gerne mp3 & ogg einbinden) Lieben Dank im Voraus!
Ich komme nicht drauf. Was spricht denn gegen ein einfaches <audio>-Tag, ganz ohne umständlichen zusätzlichen Player? Einfach die Links zu den Audiodateien direkt in die Artikelbeschreibung und von etwas Javascript in ein <audio>-Tag verpacken lassen.
Das Problem ist, dass es tatsächlich noch Browser gibt, die mit dem audio-TAG nicht alle Formate spielen können. (z.B. mp3 beim FF) Diese Player beinhalten dann eine Fallback-Lösung basierend auf einem Flash-Player. Hinzu kommt, dass man das audio-TAG nicht wirklich stylen kann, sieht dann u.U.aus wie Hund....
MP3 ist im Firefox schon lange kein Problem mehr, ca. zwei Jahre, glaub ich. Zum Testen: http://textopia.org/androidsoundformats.html Jein, nicht direkt stylen, aber man kann das UI selbst bauen und hat dann natürlich jede Freiheit, vgl. z.B. http://www.alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/ Aber ich habe jPlayer auch mit etwas anderem verwechselt. Der jPlayer ist nämlich genau das, als eine flexible Implementierung eines HTML5-Audio-Players. Also, alles gut, ich hab nix gesagt.
Wer wäre denn bereit und hätte die Zeit mir die Implementierung des jPlayers (am Beisp. der Variante 'blue.monday') in den Gambio GX2 näher zu bringen? Soll auf keinen Fall für 'Umme' sein... Ich sehe mich nun nach einigen Tagen des Versuchens definitiv an meinen Grenzen.
"Näher bringen" kann ich Dir das nicht, weil man einfach an zu vielen Ecken eingreifen muss. Evtl. kann ich Dir das realisieren. Schicke mir doch mal eine PM mit Deinen konkreten Anforderungen.