jPlayer einbinden... aber wie?

Thema wurde von Anonymous, 5. April 2015 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    3. Januar 2012
    Beiträge:
    52
    Danke erhalten:
    1
    Danke vergeben:
    20
    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">&nbsp;</div>
                    <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</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">&nbsp;</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">&nbsp;</div>
                    <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</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">&nbsp;</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">&nbsp;</div>
                    <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</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">&nbsp;</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
     
  2. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    30.948
    Danke erhalten:
    6.089
    Danke vergeben:
    1.078
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    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.
     
  3. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    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...
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    3. Januar 2012
    Beiträge:
    52
    Danke erhalten:
    1
    Danke vergeben:
    20
    #4 Anonymous, 6. April 2015
    Zuletzt bearbeitet: 10. April 2015
    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.
     
  5. MP Solution

    MP Solution Erfahrener Benutzer

    Registriert seit:
    2. Oktober 2013
    Beiträge:
    2.945
    Danke erhalten:
    456
    Danke vergeben:
    93
    Soll dieser Player Gratis sein für die Kunden oder Gäste zum Anhören?
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    3. Januar 2012
    Beiträge:
    52
    Danke erhalten:
    1
    Danke vergeben:
    20
    Ja, er soll zum Vorhören der Tracks für jeden Besucher auf der Seite sein.
     
  7. MP Solution

    MP Solution Erfahrener Benutzer

    Registriert seit:
    2. Oktober 2013
    Beiträge:
    2.945
    Danke erhalten:
    456
    Danke vergeben:
    93
    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>
     
  8. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    30.948
    Danke erhalten:
    6.089
    Danke vergeben:
    1.078
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    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.
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    3. Januar 2012
    Beiträge:
    52
    Danke erhalten:
    1
    Danke vergeben:
    20
    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! :)
     
  10. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    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.
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    3. Januar 2012
    Beiträge:
    52
    Danke erhalten:
    1
    Danke vergeben:
    20
    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.Ä.?
     
  12. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    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
     
  13. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    3. Januar 2012
    Beiträge:
    52
    Danke erhalten:
    1
    Danke vergeben:
    20
    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!
     
  14. Anonymous

    Anonymous Erfahrener Benutzer
    Mitarbeiter

    Registriert seit:
    22. Juni 2011
    Beiträge:
    4.760
    Danke erhalten:
    1.748
    Danke vergeben:
    137
    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.
     
  15. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    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....
     
  16. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    Also das ist/war ein größere Angelegenheit, mit ein paar Codebeispielen ist es da nicht getan.
     
  17. Anonymous

    Anonymous Erfahrener Benutzer
    Mitarbeiter

    Registriert seit:
    22. Juni 2011
    Beiträge:
    4.760
    Danke erhalten:
    1.748
    Danke vergeben:
    137
    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. :)
     
  18. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    3. Januar 2012
    Beiträge:
    52
    Danke erhalten:
    1
    Danke vergeben:
    20
    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.
     
  19. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    "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.
     
  20. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    3. Januar 2012
    Beiträge:
    52
    Danke erhalten:
    1
    Danke vergeben:
    20

    "Avenger möchte oder darf keine Privaten Nachrichten empfangen. (...)"