js 代码实现视频进度条点到哪个位置就播放那个位置的视频。进度条是用css样式另做的。

JavaScript011

js 代码实现视频进度条点到哪个位置就播放那个位置的视频。进度条是用css样式另做的。,第1张

我只说思路：

1。点击位置时，要判断点击点的位置，所处进度条的百分比。

2.用这个百分比和时长相乘，

3.设置播放位置（currentTime）

4. 播放

具体两种解决方法如下：

第一种：

1，Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，

2，如果不支持 HTML5 则自动使用 Flash 播放器。

第二种：

1，通过使用原生的video标签，然后再属性中没用使用controls属性，

2，然后再自己百度了暂停、播放、全屏、播放进度的代码，然后添加上去即可。

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秒监控一下

}