首页 > 代码库 > 2.3、jwplayer实现类PPT课件播放效果
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="http://www.mamicode.com/+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文件格式实例:
WEBVTT00:00:11.000 --> 00:10:20.000劳动纠纷00:00:21.000 --> 00:20:31.000解决方法00:00:41.000 --> 00:30:51.000案例100:01:10.000 --> 00:38:20.000案例200:01:30.000 --> 00:41:40.000案例300:03:22.000 --> 00:49:24.000案例4
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。