Ecco questo è il codice utilizzato nel modulo html
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
/*
* jQuery UI ThemeRoller
*
* Includes code to hide GUI volume controls on mobile devices.
* ie., Where volume controls have no effect. See noVolume option for more info.
*
* Includes fix for Flash solution with MP4 files.
* ie., The timeupdates are ignored for 1000ms after changing the play-head.
* Alternative solution would be to use the slider option: {animate:false}
*/
var myPlayer = $("#jquery_jplayer_1"),
myPlayerData,
fixFlash_mp4, // Flag: The m4a and m4v Flash player gives some old currentTime values when changed.
fixFlash_mp4_id, // Timeout ID used with fixFlash_mp4
ignore_timeupdate, // Flag used with fixFlash_mp4
options = {
ready: function (event) {
// Hide the volume slider on mobile browsers. ie., They have no effect.
if(event.jPlayer.status.noVolume) {
// Add a class and then CSS rules deal with it.
$(".jp-gui").addClass("jp-no-volume");
}
// Determine if Flash is being used and the mp4 media type is supplied. BTW, Supplying both mp3 and mp4 is pointless.
fixFlash_mp4 = event.jPlayer.flash.used && /m4a|m4v/.test(event.jPlayer.options.supplied);
// Setup the player with media.
$(this).jPlayer("setMedia", {
mp3: "percorso-file.mp3",
m4a: "percorso-file.m4a",
oga: "percorso-file.ogg"
});
},
timeupdate: function(event) {
if(!ignore_timeupdate) {
myControl.progress.slider("value", event.jPlayer.status.currentPercentAbsolute);
}
},
volumechange: function(event) {
if(event.jPlayer.options.muted) {
myControl.volume.slider("value", 0);
} else {
myControl.volume.slider("value", event.jPlayer.options.volume);
}
},
swfPath: "js",
supplied: "mp3, m4a, oga",
cssSelectorAncestor: "#jp_container_1",
wmode: "window",
keyEnabled: true
},
myControl = {
progress: $(options.cssSelectorAncestor + " .jp-progress-slider"),
volume: $(options.cssSelectorAncestor + " .jp-volume-slider")
};
// Instance jPlayer
myPlayer.jPlayer(options);
// A pointer to the jPlayer data object
myPlayerData = myPlayer.data("jPlayer");
// Define hover states of the buttons
$('.jp-gui ul li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
// Create the progress slider control
myControl.progress.slider({
animate: "fast",
max: 100,
range: "min",
step: 0.1,
value : 0,
slide: function(event, ui) {
var sp = myPlayerData.status.seekPercent;
if(sp > 0) {
// Apply a fix to mp4 formats when the Flash is used.
if(fixFlash_mp4) {
ignore_timeupdate = true;
clearTimeout(fixFlash_mp4_id);
fixFlash_mp4_id = setTimeout(function() {
ignore_timeupdate = false;
},1000);
}
// Move the play-head to the value and factor in the seek percent.
myPlayer.jPlayer("playHead", ui.value * (100 / sp));
} else {
// Create a timeout to reset this slider to zero.
setTimeout(function() {
myControl.progress.slider("value", 0);
}, 0);
}
}
});
// Create the volume slider control
myControl.volume.slider({
animate: "fast",
max: 1,
range: "min",
step: 0.01,
value : $.jPlayer.prototype.options.volume,
slide: function(event, ui) {
myPlayer.jPlayer("option", "muted", false);
myPlayer.jPlayer("option", "volume", ui.value);
}
});
});
// ]]></script>
<style scoped="scoped" type="text/css"><!--
.jp-gui {
position:relative;
padding:20px;
width:430px;
border: 1px solid transparent;
background: transparent;
margin-left: 100px;
}
.jp-gui.jp-no-volume {
width:432px;
}
.jp-gui ul {
margin:0;
padding:0;
}
.jp-gui ul li {
position:relative;
float:left;
list-style:none;
margin:2px;
padding:4px 0;
cursor:pointer;
}
.jp-gui ul li a {
margin:0 4px;
}
.jp-gui li.jp-repeat,
.jp-gui li.jp-repeat-off {
margin-left:174px;
}
.jp-gui li.jp-mute,
.jp-gui li.jp-unmute {
margin-left:7px;
}
.jp-gui li.jp-volume-max {
margin-left:100px;
}
li.jp-pause,
li.jp-repeat-off,
li.jp-unmute,
.jp-no-solution {
display:none;
}
.jp-progress-slider {
position:absolute;
top:28px;
left:100px;
width:150px;
}
.jp-progress-slider .ui-slider-handle {
cursor:pointer;
}
.jp-volume-slider {
position:absolute;
top:31px;
left:320px;
width:90px;
height:.4em;
}
.jp-volume-slider .ui-slider-handle {
height:.8em;
width:.8em;
cursor:pointer;
}
.jp-gui.jp-no-volume .jp-volume-slider {
display:none;
}
.jp-current-time,
.jp-duration {
position:absolute;
top:42px;
font-size:0.8em;
cursor:default;
}
.jp-current-time {
left:208px;
display: none;
}
.jp-duration {
right:338px;
display: none;
}
.jp-gui.jp-no-volume .jp-duration {
right:70px;
}
.jp-clearboth {
clear:both;
}
--></style>
</p>
<div id="jquery_jplayer_1" class="jp-jplayer"> </div>
<div id="jp_container_1">
<div class="jp-gui ui-widget ui-widget-content ui-corner-all">
<div class="jp-progress-slider"> </div>
<div class="jp-volume-slider"> </div>
<div class="jp-current-time"> </div>
<div class="jp-duration"> </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>
escludi l'editor quando lo inserisci e cambia i file che dovrai comunque convertire come formati mp3 , m4a e ogg
