Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I want to have a music player on my page. After looking around some, I decided to go with jPlayer. However, if you know another player that works better with ZK or is easier to use I'm open to suggestions.
Following jPlayer's quick start guide, I tried to make a zul page with ZK 6.5.0 that mimicked the guide as close as possible, and ended up with this:
<?page title="jPlayer test"?>
<zk>
<window title="jPlayer test" border="normal">
<?link type="text/css" href="/jPlayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" ?>
<script type="text/javascript" src="/jPlayer/jquery.jplayer.min.js"></script>
<script>
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
swfPath: "/jPlayer",
supplied: "m4a, oga"
});
});
</script>
<html><![CDATA[
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<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-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>
<ul class="jp-toggles">
<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>
<div class="jp-title">
<ul>
<li>Bubble</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>
]]>
</html>
</window>
</zk>This results in a broken player. It looks as though the initializing ready() javascript function is never run. I tried replacing all the $s in the script tag with jq, but that didn't help any. I also tried switching out jPlayer with flowplayer 3.2, but ran in to similar issues.
Please help!
Asked: 2012-12-11 13:34:31 +0800
Seen: 52 times
Last updated: Dec 12 '12
