2.三、jwplayer實現類PPT課件播放效果

時間 2019-11-17

標籤 jwplayer 實現 ppt 播放效果欄目 Microsoft Office 简体版

原文原文鏈接

在作一些培訓課程的時候，只須要ppt課件的東西和音頻就行了，這樣佔的服務器空間、帶寬都比較小，因此就用jwplayer的javascript接口作了一個能夠結合圖片和音頻作成播放課件的效果，可自定義播放的時間並跳轉到相應時間對應的圖片，達到播放「視頻」的效果。javascript

官方文檔：http://support.jwplayer.com/customer/portal/topics/564475-javascript-api/articlesjava

2.3.一、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.二、參數格式和調用方法

<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文件格式實例：node

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。