html 代码自动分段,HTML5+JS连续播放分段视频有没有什么方法

你可以使用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);

}

});

}

}

• play

• pause

• stop
• unmute

Update Required

To play the media you will need to either update your browser to a recent version or update your Flash plugin.