极客观点
项目管理
HarmonyOS
视频格式MP4或FLV
大约3段，每段15分钟左右。
需求：
1.显示出来的是总时间（45分钟左右）
2.能够拖动滚动条（自动切到合适的视频段）
烦请各位给一个思路
html5
你可以使用jPlayer，jPlayer对HTML5中的<audio>和<video>标签做了很好的封装。在浏览器支持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);
}
});
}
}
<!-- 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. -->
比较简单的方法，自己重写进度条以及其他控制按钮。
页面js设置每段的总时长，监听播放进度，结束后动态更改src地址。
拖动：拖动进度条，计算应该播放第几段的第几秒。动态更改src地址加参数?start=开始秒数。需要服务器支持- -#nginx开启flv和mp4的module即可。
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
省市区街道数据在哪里可以下载？
省市区街道数据在哪里可以下载？6 回答4.9k 阅读✓ 已解决
H5 可以实现点击按钮保存图片到相册功能吗？
H5 可以实现点击按钮保存图片到相册的功能吗？ 希望实现在微信中点击按钮保存图片到相册，同时希望在浏览器中点击按钮保存图片到相册，APP内嵌H5中，点击按钮保存图片到相册？这三个环境下是否可以实现这个功能，如果可以怎么写呢？4 回答8.7k 阅读
Vue项目一个报错无法找到原因?
排查了好久实在没有找到哪儿出了问题，时不时弹出来，编译结果又是正常的，尝试排查了好久但是一直没有办法排查出来，有遇到过这种报错的同学吗？或者有没有同学提供一种排查思路，因为我真的搞懵逼了。哈哈哈。5 回答7.2k 阅读✓ 已解决
Web 上的室内导航效果是如何实现的呢？
现在有越来越多的网页或者小程序支持室内导航，有做过这个需求的吗？原理是什么？有什么服务提供商可选择？4 回答11.1k 阅读
只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？
只用一个div，宽高固定（width: 100px; height: 50px;），文本内容不固定，如何实现水平、垂直居中，超出两行显示省略号？3 回答1.8k 阅读✓ 已解决
浏览器可以直接解析scss文件了吗？
我们都知道，前端浏览器支持解析.css的样式文件，对于.scss文件需要安装Sass编译器，编译成.css的文件，但是我偶然发现有直接使用.scss文件，点击这个文件且无法打开具体内容，有大神解答下吗，这是怎么实现的1 回答6k 阅读✓ 已解决
H5 页面的title 可以改变颜色吗？可以随着系统的颜色模式变化吗？
H5 页面的title 可以改变颜色吗？ 假如将页面嵌入在App内，可以随着系统的颜色模式(黑夜、白天)变化吗？或者随着app(黑夜、白天)的颜色模式变化吗？2 回答4.1k 阅读✓ 已解决
宣传栏
给每一段视频一个不显示的
<video>标签，其preload属性设置为metadata。这样的话不会加载整个视频但是你能获得每个视频的长度。这样的话通过监听那几个标签的
durationchange事件，你就知道总时间了。然后无非就是做一个可以拖动的滚动条；拖动到某个部位之后，算一下处于那段视频中间；把那段视频对应的
<video>显示出来，并把currentTime设置到相应的时间，然后play()。播放时通过监听
timeupdate事件来更新进度条的位置。通过监听ended事件来获知一段视频已经播放结束，应该加载下一段。