视频格式MP4或FLV
大约3段，每段15分钟左右。
需求：
1.显示出来的是总时间（45分钟左右）
2.能够拖动滚动条（自动切到合适的视频段）
烦请各位给一个思路
你可以使用jPlayer，jPlayer对HTML5中的<audio>和<video>标签做了很好的封装。在浏览器支持HTML5的情况下用HTML5标签，在浏览器不支持HTML5的情况下用flash代替。更重要的是jPlayer提供对播放器界面的完全定制，保证无论是在何种浏览器下播放器外观都能够一致。由于可以定制播放器界面，你提出来的要求便可以满足。
下面是我自己一个项目的代码片段，我精简了一下。你找一下timeupdate: function(event) {这一行代码，里面有更新进度条的代码。
定制播放器的HTML代码块在最后面。
你最好先google一下jPlayer，看看它的网站上的示例代码，会更容易理解我所贴的代码。
微博登录
QQ登录
微信扫码登录 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);
}
});
}
}
<!-- player for explanation of question and standard answer. -->
<div id="jplayer_listening_player" class="jp-jplayer"></div>
<div id="jp_container_listening_player" class="player">
<div class="jp-gui ui-widget ui-widget-content ui-corner-all">
<ul>
<li class="jp-play ui-state-default ui-corner-all">
<a href="javascript:;" class="jp-play ui-icon ui-icon-play" tabindex="1" title="play">play</a>
</li>
<li class="jp-pause ui-state-default ui-corner-all">
<a href="javascript:;" class="jp-pause ui-icon ui-icon-pause" tabindex="1" title="pause">pause</a></li>
<li class="jp-stop ui-state-default ui-corner-all"><a href="javascript:;" class="jp-stop ui-icon ui-icon-stop" tabindex="1" title="stop">stop</a></li>
<li><div class="jp-current-time"></div></li>
<li><div class="jp-progress-slider"></div></li>
<li><div class="jp-duration"></div></li>
<!--
<li class="jp-repeat ui-state-default ui-corner-all"><a href="javascript:;" class="jp-repeat ui-icon ui-icon-refresh" tabindex="1" title="repeat">repeat</a></li>
<li class="jp-repeat-off ui-state-default ui-state-active ui-corner-all"><a href="javascript:;" class="jp-repeat-off ui-icon ui-icon-refresh" tabindex="1" title="repeat off">repeat off</a></li>
<li class="jp-mute ui-state-default ui-corner-all"><a href="javascript:;" class="jp-mute ui-icon ui-icon-volume-off" tabindex="1" title="mute">mute</a></li>
-->
<li class="jp-unmute ui-state-default ui-state-active ui-corner-all"><a href="javascript:;" class="jp-unmute ui-icon ui-icon-volume-off" tabindex="1" title="unmute">unmute</a></li>
<li><div class="jp-volume-slider"></div></li>
<!-- <li class="jp-volume-max ui-state-default ui-corner-all"><a href="javascript:;" class="jp-volume-max ui-icon ui-icon-volume-on" tabindex="1" title="max volume">max volume</a></li> -->
</ul>
<div class="jp-clearboth"></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>
<!-- END OF player for explanation of question and standard answer. -->
给每一段视频一个不显示的 <video> 标签，其 preload 属性设置为 metadata。这样的话不会加载整个视频但是你能获得每个视频的长度。
这样的话通过监听那几个标签的 durationchange 事件，你就知道总时间了。
然后无非就是做一个可以拖动的滚动条；拖动到某个部位之后，算一下处于那段视频中间；把那段视频对应的 <video> 显示出来，并把 currentTime 设置到相应的时间，然后 play()。
播放时通过监听 timeupdate 事件来更新进度条的位置。通过监听 ended 事件来获知一段视频已经播放结束，应该加载下一段。
鄂公网安备 42090202000075号 - 鄂ICP备2021002952号-1
