jPlayer von jplayer.org einbinden

Deutsches Forum
1

Hallo liebe Forengemeinde,

ich habe den Forenthread Wie EMFF Player einbinden? gelesen und auch den Player erstmal einbinden können.

Wenn mp3s als Medien für den Artikel existieren soll der Player auf der Bescheibungsseite erscheinen.

Wer sich das in live anschauen möchte: http://ts.zauberklavier.de Anmeldung mit oxid und Passwort oxid (wie kreativ ;-))

Dazu müssen vier Sachen ins Template eingebunden werden:
[ul]
[li] css Datei
[/li][li] js Scripte
[/li][li] die Mediendateien
[/li][li] den HTML Code für den Player an sich
[/li][/ul]

Ich habe ein Template erstellt (jplayer.tpl) welches ich in der application/views/zauberklavier/tpl/page/details/inc/tabs.tpl via

                [{if $oView->getMediaFiles() || $oDetailsProduct->oxarticles__oxfile->value}]
                        [{include file="page/details/inc/jplayer.tpl"}]
                [{/if}]

eingefügt habe.

CSS und js Dateien einbinden (Auszug jplayer.tpl):

[{oxstyle include="css/jplayer/jplayer.blue.monday.min.css" priority=1}]
[{oxscript include="js/jplayer/jquery.min.js" priority=1}]
[{oxscript include="js/jplayer/jquery.jplayer.min.js" priority=1}]
[{oxscript include="js/jplayer/jplayer.playlist.min.js" priority=1}]

Mediendateien einbinden (Auszug jplayer.tpl):

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

        new jPlayerPlaylist({
                jPlayer: "#jquery_jplayer_1",
                cssSelectorAncestor: "#jp_container_1"
        }, [
[{foreach from=$oView->getMediaFiles() item=oMediaUrl}]
                {
                        title:"[{$oMediaUrl->oxmediaurls__oxdesc->value}]",
                        free:true,
                        mp3:"[{$oViewConf->getHomeLink()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]"
                },
[{/foreach}]
        ], {
                swfPath: "./js",
                supplied: "oga, mp3",
                useStateClassSkin: true,
                autoBlur: true,
                smoothPlayBar: true,
                keyEnabled: true,
                audioFullScreen: false
        });
});
//]]>
</script>

Der HTML-Code für den Player (Auszug jplayer.tpl):

<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-playlist">
                <div class="jp-gui jp-interface">
                        <div class="jp-controls">
                                <button class="jp-previous" role="button" tabindex="0">previous</button>
                                <button class="jp-play" role="button" tabindex="0">play</button>
                                <button class="jp-next" role="button" tabindex="0">next</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>
                        <div class="jp-toggles">
                                <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                                <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
                        </div>
                </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>

[ul]
[li]Die CSS-Dateien werden im Head der HTML-Seite eingebunden.
[/li][li]Die Scripte werden ans Ende der ausgelieferten HTM-Seite eingebunden.
[/li][li]Der Scriptteil mit den Links der mp3-Dateien wird auch eingebunden. Dummerweise !vor! dem playerscripten (jquery.jplayer.min.js und jplayer.playlist.min.js)[/ul]
[/li]
Wie kann ich folgenden Code:

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

        new jPlayerPlaylist({
                jPlayer: "#jquery_jplayer_1",
                cssSelectorAncestor: "#jp_container_1"
        }, [
[{foreach from=$oView->getMediaFiles() item=oMediaUrl}]
                {
                        title:"[{$oMediaUrl->oxmediaurls__oxdesc->value}]",
                        free:true,
                        mp3:"[{$oViewConf->getHomeLink()}]out/media/[{$oMediaUrl->oxmediaurls__oxurl->value}]"
                },
[{/foreach}]
        ], {
                swfPath: "./js",
                supplied: "oga, mp3",
                useStateClassSkin: true,
                autoBlur: true,
                smoothPlayBar: true,
                keyEnabled: true,
                audioFullScreen: false
        });
});
//]]>
</script>

unter den js.scripten in der Ausgabe-HTML-Seite

[{oxscript include="js/jplayer/jquery.jplayer.min.js" priority=1}]
[{oxscript include="js/jplayer/jplayer.playlist.min.js" priority=1}]

platzieren?

Ich habe zwei Testartikel angelegt:

http://ts.zauberklavier.de/Notenhefte/Test.html

http://ts.zauberklavier.de/Notenhefte/Test-mit-Varianten.html

Wenn man bei dem zweiten eine Variante auswählt funktioniert es wie gewünscht (weil beim wählen der Variante das DATA schon gelesen wurde…)

Ich hoffe auf sachdienliche Hinweise

Guido

2

Du kannst js-Code mit capture in eine Smarty-Variable schreiben und dann mit oxscript add am Ende der Seite ausgeben.

3

[QUOTE=leofonic;161652]Du kannst js-Code mit capture in eine Smarty-Variable schreiben und dann mit oxscript add am Ende der Seite ausgeben.[/QUOTE]

Vielen Dank für den Hinweis.

Ich habe nun weiter probiert und benötige noch einen kurzen Stubbs :slight_smile:

[{capture name="jplayerdata"}]
        <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function(){
.
.
.
        });
        //]]>
        </script>
[{/capture}]

Wenn ich nun in dem Template irgendwo

<!-- smarty.capture.jplayerdata -->
[{$smarty.capture.jplayerdata}]
<!-- smarty.capture.jplayerdata -->

aufrufe, wird auch schön der Inhalt der Variable in die HTML-Datei geschrieben…

Ich habe dann versucht mit [B][{oxscript include="[{$smarty.capture.jplayerdata}]"}][/B] beziehungsweise [B][{oxscript add="[{$smarty.capture.jplayerdata}]"}][/B]
direkt unter den Zeilen am Anfang von jplayer.tpl

[{oxscript include="js/jplayer/jquery.jplayer.min.js" priority=1}]
[{oxscript include="js/jplayer/jplayer.playlist.min.js" priority=1}]

den Codeschnipsel einzubinden.

Dies funktioniert aber nicht.

Wie muss ich die Variable [{$smarty.capture.jplayerdata}] einbinden, damit der Scriptblock am Ende der HTML-Datei gezeigt wird?

Vielen herzlichen Dank,

Guido

4 
[{capture assign=pageScript}]
...dein Code....
[{/capture}]
[{oxscript add=$pageScript}]
5

Juhu…

vielen Dank. Mit

[{oxscript add=$smarty.capture.jplayerdata}]

und dem Entfernen von [B]<script type=“text/javascript”></script>[/B] im [{capture name=“jplayerdata”}] …[{/capture}] Bereich klappt es nun wie ich es mir vorgestellt habe.

Nun noch eine Anschlußfrage:

Sollte ich diese Anpassungen in das Childtheme integrieren (dann bin ich fertig ;)) oder baut man sowas besser als Modul?

Guido

6

[QUOTE=newotec;161691]Sollte ich diese Anpassungen in das Childtheme integrieren (dann bin ich fertig ;)) oder baut man sowas besser als Modul?[/QUOTE]

Ein Modul ist immer vorzuziehen. An Child-Theme wirst du sicher ab und an basteln, ein Modul bleibt von all den unberührt.

Grüße
Rafig

7

Wenn du es nur in diesem Theme nutzen willst -> Childtheme
Wenn es vom Theme unabhängig sein soll -> Modul