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