2.3、jwplayer实现类PPT课件播放效果
在做一些培训课程的时候，只需要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
