84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
视频格式MP4或FLV
大约3段,每段15分钟左右。
需求:
1.显示出来的是总时间(45分钟左右) 2.能够拖动滚动条(自动切到合适的视频段)
烦请各位给一个思路
业精于勤,荒于嬉;行成于思,毁于随。
给每一段视频一个不显示的 <video> 标签,其 preload 属性设置为 metadata。这样的话不会加载整个视频但是你能获得每个视频的长度。
<video>
preload
metadata
这样的话通过监听那几个标签的 durationchange 事件,你就知道总时间了。
durationchange
然后无非就是做一个可以拖动的滚动条;拖动到某个部位之后,算一下处于那段视频中间;把那段视频对应的 <video> 显示出来,并把 currentTime 设置到相应的时间,然后 play()。
currentTime
play()
播放时通过监听 timeupdate 事件来更新进度条的位置。通过监听 ended 事件来获知一段视频已经播放结束,应该加载下一段。
timeupdate
ended
你可以使用jPlayer,jPlayer对HTML5中的<audio>和<video>标签做了很好的封装。在浏览器支持HTML5的情况下用HTML5标签,在浏览器不支持HTML5的情况下用flash代替。更重要的是jPlayer提供对播放器界面的完全定制,保证无论是在何种浏览器下播放器外观都能够一致。由于可以定制播放器界面,你提出来的要求便可以满足。 下面是我自己一个项目的代码片段,我精简了一下。你找一下timeupdate: function(event) {这一行代码,里面有更新进度条的代码。
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. --> <p id="jplayer_listening_player" class="jp-jplayer"></p> <p id="jp_container_listening_player" class="player"> <p 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><p class="jp-current-time"></p></li> <li><p class="jp-progress-slider"></p></li> <li><p class="jp-duration"></p></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><p class="jp-volume-slider"></p></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> <p class="jp-clearboth"></p> </p> <p 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>. </p> </p> <!-- END OF player for explanation of question and standard answer. -->
比较简单的方法,自己重写进度条以及其他控制按钮。
页面js设置每段的总时长,监听播放进度,结束后动态更改src地址。 拖动:拖动进度条,计算应该播放第几段的第几秒。动态更改src地址加参数?start=开始秒数。需要服务器支持- -#nginx开启flv和mp4的module即可。
请问楼主这个问题解决了没啊?
给每一段视频一个不显示的
<video>
标签,其preload
属性设置为metadata
。这样的话不会加载整个视频但是你能获得每个视频的长度。这样的话通过监听那几个标签的
durationchange
事件,你就知道总时间了。然后无非就是做一个可以拖动的滚动条;拖动到某个部位之后,算一下处于那段视频中间;把那段视频对应的
<video>
显示出来,并把currentTime
设置到相应的时间,然后play()
。播放时通过监听
timeupdate
事件来更新进度条的位置。通过监听ended
事件来获知一段视频已经播放结束,应该加载下一段。你可以使用jPlayer,jPlayer对HTML5中的<audio>和<video>标签做了很好的封装。在浏览器支持HTML5的情况下用HTML5标签,在浏览器不支持HTML5的情况下用flash代替。更重要的是jPlayer提供对播放器界面的完全定制,保证无论是在何种浏览器下播放器外观都能够一致。由于可以定制播放器界面,你提出来的要求便可以满足。
下面是我自己一个项目的代码片段,我精简了一下。你找一下
timeupdate: function(event) {
这一行代码,里面有更新进度条的代码。定制播放器的HTML代码块在最后面。
你最好先google一下jPlayer,看看它的网站上的示例代码,会更容易理解我所贴的代码。
比较简单的方法,自己重写进度条以及其他控制按钮。
页面js设置每段的总时长,监听播放进度,结束后动态更改src地址。
拖动:拖动进度条,计算应该播放第几段的第几秒。动态更改src地址加参数?start=开始秒数。需要服务器支持- -#nginx开启flv和mp4的module即可。
请问楼主这个问题解决了没啊?