码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-07-14 22:41:35      阅读:850      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   文件   

在做一些培训课程的时候,只需要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课件播放效果,布布扣,bubuko.com

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

标签:style   blog   http   java   color   文件   

原文地址:http://www.cnblogs.com/fremcode/p/3842291.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!