首页 > 代码库 > 2.3、jwplayer实现类PPT课件播放效果

2.3、jwplayer实现类PPT课件播放效果

2024-07-12 00:09:27   221人阅读

在做一些培训课程的时候，只需要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

 


联系
我们