小皮2017-04-17 11:07:443楼
你可以使用jPlayer,jPlayer对HTML5中的和标签做了很好的封装。在浏览器支持HTML5的情况下用HTML5标签,在浏览器不支持HTML5的情况下用flash代替。更重要的是jPlayer提供对播放器界面的完全定制,保证无论是在何种浏览器下播放器外观都能够一致。由于可以定制播放器界面,你提出来的要求便可以满足。
下面是我自己一个项目的代码片段,我精简了一下。你找一下timeupdate: function(event) {这一行代码,里面有更新进度条的代码。
定制播放器的HTML代码块在最后面。
你最好先google一下jPlayer,看看它的网站上的示例代码,会更容易理解我所贴的代码。
function initPlayer(playerId, containerId) {
var paused = true, count = 0;
var $audioPlayer = $("#"+playerId),
audioPlayerData,
options = {
preload: "auto",
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");
}
},
timeupdate: function(event) {
var beginTime = $(this).data("beginTime"),
endTime = $(this).data("endTime"),
current = event.jPlayer.status.currentTime,
duration = event.jPlayer.status.duration;
if(typeof beginTime == "undefined")
beginTime = 0;
if(typeof endTime == "undefined")
endTime = duration;
myControl.progress.slider("value", (current - beginTime) * 100.0 / (endTime - beginTime));
if(!event.jPlayer.status.paused) {
if(current >= endTime) {
$(this).jPlayer("stop");
if($(this).data("onEnded")) {
$(this).data("onEnded")();
}
}
else if(current < beginTime) {
$(this).jPlayer("playHead", beginTime / duration * 100);
}
}
},
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",
cssSelectorAncestor: "#"+containerId,
wmode: "window",
play: function(event) {
if(paused) {
paused = false;
$audioPlayer.data("paused", false);
}
},
pause: function(event) {
if(!paused) {
paused = true;
$audioPlayer.data("paused", true);
}
}
},
myControl = {
progress: $(options.cssSelectorAncestor + " .jp-progress-slider"),
volume: $(options.cssSelectorAncestor + " .jp-volume-slider")
};
// Instance jPlayer
$audioPlayer.jPlayer(options);
// A pointer to the jPlayer data object
audioPlayerData = $audioPlayer.data("jPlayer");
audioPlayerData._updateInterface = function() {
if(this.css.jq.currentTime.length) {
this.css.jq.currentTime.text($.jPlayer.convertTime(this.status.currentTime - this.getBeginTime()));
}
if(this.css.jq.duration.length) {
this.css.jq.duration.text($.jPlayer.convertTime(this.getEndTime() - this.getBeginTime()));
}
}
audioPlayerData.getBeginTime = function() {
var beginTime = $audioPlayer.data("beginTime");
if(typeof beginTime == "undefined")
beginTime = 0;
return beginTime;
}
audioPlayerData.getEndTime = function() {
var endTime = $audioPlayer.data("endTime");
if(typeof endTime == "undefined")
endTime = this.status.duration;
return endTime;
}
audioPlayerData.forceUpdateProgressBar = function () {
myControl.progress.slider("value", 0);
}
// Define hover states of the buttons
$('li.jp-volume-max,li.jp-mute,li.jp-unmute,li.jp-stop,li.jp-pause,li.jp-play').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 = audioPlayerData.status.seekPercent;
if(sp > 0) {
// Move the play-head to the value and factor in the seek percent.
var seekPos = (audioPlayerData.getEndTime() - audioPlayerData.getBeginTime()) * ui.value / 100.0 + audioPlayerData.getBeginTime();
$audioPlayer.jPlayer("playHead", seekPos / audioPlayerData.status.duration * 100.0);
} 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) {
$audioPlayer.jPlayer("option", "muted", false);
$audioPlayer.jPlayer("option", "volume", ui.value);
}
});
}
}
Update Required
To play the media you will need to either update your browser to a recent version or update your Flash plugin.