在做一些培训课程的时候，只需要ppt课件的东西和音频就好了，这样占的服务器空间、带宽都比较小，所以就用jwplayer的javascript接口做了一个可以结合图片和音频做成播放课件的效果，可自定义播放的时间并跳转到相应时间对应的图片，达到播放“视频”的效果。
官方文档：http://support.jwplayer.com/customer/portal/topics/564475-javascript-api/articles
2.3.1、javascript接口
<script>
//获取当前播放时间的位置
function gettime(){
var time;
time=jwplayer().getPosition().toFixed(0);
return time;
}
//设置播放器播放的时间
function setposition(time){
jwplayer().seek(time);
}
//定时器，每隔1秒javascript执行一次
function MyShow(){
timer = window.setInterval("init_pic(course)",1000);//1000表示1秒刷新一次
}
///////////////////////显示图片//////////////////////
function init_pic(course){
var i=key=time_current=time_pic=next=0;
var time=Number(gettime());//播放器时间
var len=course.pic.length;
var img=pic=get_pic();//当前显示图片路径
for(key in course.pic){
prev=key*1-1*1;
next=key*1+1*1;
if(prev<0){
prev=0;
}
if(next<len){
time_current=Number(course.pic[key].time);//遍历图片的时间节点
time_current_next=Number(course.pic[next].time);//遍历图片的下一时间节点
}
pic_current=course.pic[key].pic;//遍历图片路径
if(pic==pic_current){//获得当前图片的时间
time_pic=Number(course.pic[key].time);//当前图片的时间
time_prev=Number(course.pic[prev].time);//当前图片的上一张图片的时间
time_next=Number(course.pic[next].time);//当前图片的下一张图片的时间
}
if(time>=time_current&&time<time_current_next){//根据播放器时间取得应该跳转的图片路径
img=course.pic[key].pic;
}
if(time<time_pic||time>time_next){
document.getElementById("pic").innerHTML="<img src="+img+" height=‘675‘ width=‘900‘/>";
}
}
//以上id=”pic”,图片大小可以自定义，在此只是说明javascript调用测试的方法。
}
//获取第几张图片
function get_pic(){
pic_node=document.getElementsByTagName("img");
pic=pic_node[0].getAttribute("src");
return pic;
}
</script>
2.3.2、参数格式和调用方法
<body onload="MyShow()">
<div style="width:900px;background-color:#333;">
<div id="pic" style="min-height:675px;">
<img src="/ppt/01/01.JPG" height=‘675‘ width=‘900‘/>
</div>
<div id="player1"></div>
</div>
<!-- 播放器代码 -->
<script>
//初始化数据格式(JSON格式)
var course={
"file":"/ppt/01/01.mp3",
"vtt":[{"vtt":"/ppt/01/01.vtt"}],
"pic":[
{"pic":"/ppt/01/01.JPG","time":"0"},
{"pic":"/ppt/01/02.JPG","time":"300"},
{"pic":"/ppt/01/03.JPG","time":"600"},
{"pic":"/ppt/01/04.JPG","time":"900"},
{"pic":"/ppt/01/05.JPG","time":"1200"},
{"pic":"/ppt/01/06.JPG","time":"1400"},
{"pic":"/ppt/01/07.JPG","time":"1600"},
{"pic":"/ppt/01/08.JPG","time":"1800"},
{"pic":"/ppt/01/09.JPG","time":"1900"},
{"pic":"/ppt/01/10.JPG","time":"2000"},
{"pic":"/ppt/01/11.JPG","time":"2200"},
{"pic":"/ppt/01/12.JPG","time":"2400"},
{"pic":"/ppt/01/13.JPG","time":"2600"},
{"pic":"/ppt/01/14.JPG","time":"2700"},
{"pic":"/ppt/01/15.JPG","time":"2800"},
{"pic":"/ppt/01/16.JPG","time":"2850"},
{"pic":"/ppt/01/17.JPG","time":"2950"},
{"pic":"/ppt/01/18.JPG","time":"2990"},
{"pic":"/ppt/01/18.JPG","time":"3028"}
]
};
//播放器代码
jwplayer("player1").setup({
file:course.file,
height:30,
width:900
});
</script>
<br/>
//以下代码为跳转到播放时间，可以不用设置为button
<button type="button" onclick="setposition(‘900‘)">最佳解决方案</button>
<button type="button" onclick="setposition(‘1900‘)">正确处理方式</button>
<button type="button" onclick="setposition(‘2600‘)">特别提醒</button>
<div>
</div>
</body>
.vtt文件格式实例：
WEBVTT 00:00:11.000 --> 00:10:20.000 劳动纠纷 00:00:21.000 --> 00:20:31.000 解决方法 00:00:41.000 --> 00:30:51.000 案例1 00:01:10.000 --> 00:38:20.000 案例2 00:01:30.000 --> 00:41:40.000 案例3 00:03:22.000 --> 00:49:24.000 案例4
2.3、jwplayer实现类PPT课件播放效果
时间： 2024-10-10 18:02:10