如何用JS控制多个视频的连续播放

JavaScript014

如何用JS控制多个视频的连续播放,第1张

window.onload=function(){

var str = '${vedioStr}' //所要播放视频的路径组

var strList = str.split("X") //要循序播放的路径组字符串转换成路径数组

var i=0

var len = strList.length

if( strList[i] != null &&strList[i]!='' &&strList[i] !='null'){

$("#XX").find("OBJECT").attr("filename", strList[i])//设置视频路径为第一个路径组路径

}

window.setInterval(function(){ //每过0.5秒监控一下视频是否正在播放，如果没在播放则顺序播放下一个视频

if($("#XX").find("OBJECT").attr("playState")==0){//判断视频的播放状态不同player状态不同

i++//处理播放顺序和for循环处理差不错

if(i==len){

i=0

}

if( strList[i] != null &&strList[i]!='' &&strList[i] !='null'){

$("#XX").find("OBJECT").attr("filename", strList[i]) //如果当前播放完毕则播放下一个

}

}

}, 500) //每个0.5秒监控一下

}

给每一段视频一个不显示的video标签，其preload属性设置为metadata。这样的话不会加载整个视频但是能获得每个视频的长度。

这样的话通过监听那几个标签的durationchange事件，就知道总时间了。

然后无非就是做一个可以拖动的滚动条；拖动到某个部位之后，算一下处于那段视频中间；把那段视频对应的video显示出来，并把currentTime设置到相应的时间，然后play()。

播放时通过监听timeupdate事件来更新进度条的位置。通过监听ended事件来获知一段视频已经播放结束，应该加载下一段。