侯全軍

(湖南廣播電視大學(xué)，湖南長(zhǎng)沙 410004)

三分屏網(wǎng)絡(luò)課件的程序設(shè)計(jì)

侯全軍*

(湖南廣播電視大學(xué)，湖南長(zhǎng)沙 410004)

三分屏網(wǎng)絡(luò)課件的應(yīng)用日益廣泛，為了降低制作成本和技術(shù)難度，本文通過(guò)對(duì)基于流媒體視頻的三分屏網(wǎng)絡(luò)課件的功能要求和javascript語(yǔ)言的特點(diǎn)進(jìn)行分析，論述了課件制作的技術(shù)框架和程序設(shè)計(jì)，突破核心技術(shù)難點(diǎn)，為三分屏網(wǎng)絡(luò)課件的制作提供了一套有效的解決方案。

三分屏;流媒體;程序設(shè)計(jì);javascript語(yǔ)言

一、引言

隨著遠(yuǎn)程教育的發(fā)展，網(wǎng)絡(luò)多媒體課件的應(yīng)用日益普及，目前基于網(wǎng)絡(luò)流媒體的三分屏網(wǎng)絡(luò)課件應(yīng)用廣泛［1］。三分屏網(wǎng)絡(luò)課件是將瀏覽器頁(yè)面分為教師視頻、授課電子文檔、課程綱要三個(gè)部分，并保持同步演示的網(wǎng)絡(luò)多媒體課件。其內(nèi)容豐富，圖文并茂，提高了學(xué)習(xí)的效率。但是，目前的三分屏制作技術(shù)主要是通過(guò)專業(yè)的開發(fā)軟件來(lái)完成，對(duì)普通教師和網(wǎng)絡(luò)技術(shù)人員來(lái)說(shuō)有一定的門檻，同時(shí)購(gòu)買軟件也給教師和學(xué)校帶來(lái)了一定的經(jīng)濟(jì)壓力。

JavaScript是一種能讓網(wǎng)頁(yè)更加生動(dòng)活潑的程式語(yǔ)言，它可以通過(guò)多種方式鑲嵌在網(wǎng)頁(yè)里面。JavaScript腳本代碼的學(xué)習(xí)和使用方便靈活，非常容易調(diào)試和運(yùn)行［2］，結(jié)合 javascript語(yǔ)言的特點(diǎn)，合理的進(jìn)行程序設(shè)計(jì)，可以較為輕松的實(shí)現(xiàn)三分屏網(wǎng)絡(luò)流媒體課件的制作。

二、功能要求

一個(gè)使用靈活，交互性強(qiáng)，符合學(xué)習(xí)者習(xí)慣的網(wǎng)絡(luò)流媒體三分屏課件必須達(dá)到以下功能要求:基于IE瀏覽器，并可直接在網(wǎng)頁(yè)上播放，利用IE內(nèi)嵌的流媒體插件播放視頻，無(wú)須安裝和下載任何其它插件;在頁(yè)面上可演示教師授課視頻，教師板書內(nèi)容，章節(jié)目錄以及頁(yè)碼信息;在播放視頻的同時(shí)，板書和頁(yè)碼信息同步更新;同時(shí)具有強(qiáng)大的交互功能，用戶可以任意調(diào)節(jié)視頻播放進(jìn)度，選取章節(jié)和板書內(nèi)容，三者始終自動(dòng)更新，保持內(nèi)容同步;網(wǎng)頁(yè)的下載速度快，板書內(nèi)容占用帶寬小，代碼的執(zhí)行效率高。

三、設(shè)計(jì)思路

依據(jù)三分屏課件的功能要求和javascript的技術(shù)特點(diǎn)，設(shè)計(jì)思路可以分為三個(gè)部分。第一，利用視頻的播放進(jìn)度來(lái)統(tǒng)一調(diào)度板書內(nèi)容和頁(yè)碼信息。在三分屏中，視頻播放的進(jìn)度是核心內(nèi)容，其它內(nèi)容的同步都是依據(jù)視頻播放的進(jìn)度來(lái)同步更新，在課件的制作過(guò)程中，對(duì)視頻的時(shí)間碼進(jìn)行記錄和編寫，每個(gè)板書內(nèi)容對(duì)應(yīng)一個(gè)時(shí)間碼，利用時(shí)間碼觸發(fā)板書內(nèi)容和頁(yè)碼信息的更新。第二，靜態(tài)板書內(nèi)容采用圖片或矢量圖形格式，動(dòng)態(tài)內(nèi)容采用SWF動(dòng)畫格式，并進(jìn)行合理分割。傳統(tǒng)的三分屏技術(shù)常采用視頻捕捉技術(shù)來(lái)獲取板書內(nèi)容，這樣數(shù)據(jù)量大，對(duì)網(wǎng)絡(luò)帶寬要求高，也不利于交互，采用圖形和SWF格式，可以對(duì)板書內(nèi)容進(jìn)行合理分割，易于交互，同時(shí)也大大降低了對(duì)帶寬的要求。第三，對(duì)用戶更新板書內(nèi)容或頁(yè)面的事件進(jìn)行跟蹤，并及時(shí)傳遞給視頻播放控件，同步視頻內(nèi)容。

四、技術(shù)框架

JavaScript的對(duì)象有兩種:一種可被稱為普通對(duì)象，另一種被稱為方法對(duì)象，普通對(duì)象就像我們所理解的那些，如數(shù)據(jù)，日期，用戶自定義的對(duì)象;方法對(duì)象是我們自定義的function［3］。我們可以利用方法對(duì)象來(lái)自己定義和編寫功能函數(shù)，并可進(jìn)行靈活的調(diào)用。

流媒體視頻播放器通過(guò)瀏覽器內(nèi)置的視頻播放控件制作，利用自定義函數(shù)對(duì)控件的屬性進(jìn)行調(diào)用和修改。例如，通過(guò)播放器控件的CurrentPosition屬性獲得流媒體播放的時(shí)間碼，同時(shí)也可更改在屬性值，改變播放的位置。教師課件板書內(nèi)容及頁(yè)碼等信息的同步利用JavaScript編程技術(shù)來(lái)改變頁(yè)面圖片和文字的屬性。

在三分屏的制作中，保持同步就需要一個(gè)偵聽器，偵聽器需要在一定時(shí)間內(nèi)監(jiān)測(cè)視頻流和板書內(nèi)容及相關(guān)頁(yè)碼文字信息的變化，在技術(shù)上利用JavaScript的預(yù)定義函數(shù) setTimeout(fun，int)來(lái)實(shí)現(xiàn)。偵聽器主要監(jiān)測(cè)視頻播放控件的CurrentPosition和當(dāng)前頁(yè)面參數(shù)，在無(wú)交互事件觸發(fā)時(shí)，利用控件的CurrentPosition屬性調(diào)整板書內(nèi)容的更新，如果有交互事件觸發(fā)板書內(nèi)容或頁(yè)面信息的變化，則通過(guò)頁(yè)面參數(shù)調(diào)整視頻播放的進(jìn)度，達(dá)到三者任意交互調(diào)節(jié)，并始終保持同步的目的。

授課板書內(nèi)容的存儲(chǔ)格式采用JPG或者GIF交互式動(dòng)畫格式，按授課的對(duì)內(nèi)容進(jìn)行分割，并且利用統(tǒng)一名稱存儲(chǔ)為圖像序列文件，便于程序自動(dòng)調(diào)用。

五、程序設(shè)計(jì)

1.變量和函數(shù)的預(yù)定義。在設(shè)計(jì)過(guò)程中需要實(shí)現(xiàn)定義網(wǎng)頁(yè)元素的一些變量，避免在javascript的調(diào)用過(guò)程中無(wú)法找到相應(yīng)數(shù)據(jù)而失效，這里我們定義了視頻播放控件為MediaPlayer1，板書內(nèi)容的目錄為Dirppt，動(dòng)態(tài)頁(yè)碼信息文本框?yàn)閜osition_box，板書內(nèi)容頁(yè)面總數(shù)為PageNum，當(dāng)前頁(yè)面文本框ID為page1，頁(yè)碼合計(jì)頁(yè)面文本框ID為page2。在網(wǎng)頁(yè)中還需建立PageToPosition［］數(shù)組，將視頻與板書內(nèi)容一一對(duì)應(yīng)的時(shí)間碼按順序賦給數(shù)組，該數(shù)組是視頻和板書及頁(yè)碼信息同步的標(biāo)準(zhǔn)，所以必須準(zhǔn)確無(wú)誤。

2.獲取視頻流對(duì)應(yīng)的頁(yè)碼信息。對(duì)視頻的播放進(jìn)度進(jìn)行檢測(cè)，通過(guò)視頻流的時(shí)間碼與PageToPosition［］數(shù)組的時(shí)間碼對(duì)比，獲得當(dāng)前頁(yè)碼信息，并返回一個(gè)整數(shù)型頁(yè)碼參數(shù)。該頁(yè)碼參數(shù)是指導(dǎo)板書內(nèi)容調(diào)用的參數(shù)，是實(shí)現(xiàn)同步播放的核心參數(shù)。該自定義函數(shù)的程序算法如下:

3.監(jiān)控板書內(nèi)容和頁(yè)碼信息。為了達(dá)到與視頻流同步播放，需要實(shí)時(shí)監(jiān)控板書內(nèi)容和頁(yè)碼信息，自定義Get_position()函數(shù)，根據(jù)對(duì)比當(dāng)前頁(yè)碼信息和當(dāng)前視頻流時(shí)間碼信息，來(lái)調(diào)整板書內(nèi)容以及相應(yīng)的文字提示信息，執(zhí)行了更新任務(wù)，無(wú)須返回參數(shù)。該自定義函數(shù)的程序算法如下:

4.調(diào)整視頻流播放進(jìn)度。在同步控制的過(guò)程中，如果用戶選擇了章節(jié)或是調(diào)整了板書內(nèi)容及頁(yè)碼信息，需要及時(shí)調(diào)整視頻流播放的內(nèi)容，調(diào)用與板書同步的視頻信息，這里通過(guò)調(diào)用視頻播放空間的內(nèi)置函數(shù)來(lái)控制，函數(shù)中對(duì)應(yīng)的變量因?yàn)闀r(shí)間碼，時(shí)間碼可以通過(guò)PageToPosition［］數(shù)組來(lái)獲得。該自定義功能函數(shù)的程序算法如下:

5.根據(jù)頁(yè)碼信息調(diào)整視頻內(nèi)容。在交互過(guò)程中，用戶可任意調(diào)整的頁(yè)碼信息，選擇需要觀看的章節(jié)或某一特定的頁(yè)面內(nèi)容。在設(shè)計(jì)中，可以通過(guò)頁(yè)碼的變化，調(diào)整視頻播放的進(jìn)度，建立一個(gè)自定義函數(shù)MpageToPosition(var)，先對(duì)頁(yè)碼信息是否變化進(jìn)行判斷，如果沒(méi)有變更則保持視頻繼續(xù)播放，避免重復(fù)加載和刷新，導(dǎo)致頁(yè)面不斷閃爍;如果發(fā)生變化，則根據(jù)頁(yè)碼參數(shù)觸發(fā)視頻調(diào)用函數(shù)Set_position(num)，實(shí)現(xiàn)視頻流的同步。該自定義功能函數(shù)的程序算法如下:

6.頁(yè)碼交互事件的接收與處理。為了加強(qiáng)交互性，可以設(shè)置上一頁(yè)和下一頁(yè)按鈕事件，當(dāng)點(diǎn)擊時(shí)，控制板書面板的更新，同時(shí)觸發(fā)視頻流播放的同步。這里主要根據(jù)函數(shù)的相互調(diào)用來(lái)完成，只要在網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)一個(gè)時(shí)間接收，調(diào)用自定義函數(shù)UpPage()和DownPage()即可完成，該自定義功能函數(shù)的程序算法如下:

六、結(jié)束語(yǔ)

在以上的設(shè)計(jì)中主要針對(duì)一些核心技術(shù)進(jìn)行了論述，還有一些細(xì)節(jié)需要根據(jù)具體的內(nèi)容來(lái)修改，例如動(dòng)畫演示功能、文字色彩變化功能等。

本設(shè)計(jì)在同步演示、學(xué)習(xí)者交互上進(jìn)行了巧妙的設(shè)計(jì)，改變了傳統(tǒng)滿堂灌的網(wǎng)絡(luò)視頻教學(xué)課件，學(xué)習(xí)者可以任意控制學(xué)習(xí)的進(jìn)度和挑選學(xué)習(xí)的內(nèi)容，在使用上簡(jiǎn)單，不需安裝插件，可直接利用IE觀看和學(xué)習(xí)。制作技術(shù)難度小，開發(fā)成本低。在核心技術(shù)的推廣下，給廣大教師和課件制作者提供廣闊的拓展空間，可以依托本設(shè)計(jì)進(jìn)行功能更為強(qiáng)大的二次開發(fā)，增添一些豐富的功能，例如一些相關(guān)資源的超鏈接、資源搜索功能、留言功能、筆記功能等，使網(wǎng)絡(luò)流媒體三分屏課件上升到一個(gè)新的臺(tái)階，為網(wǎng)絡(luò)資源建設(shè)提供強(qiáng)有力的技術(shù)支持，為學(xué)習(xí)者提供一個(gè)易于操作、人性化程度高、學(xué)習(xí)效果好的網(wǎng)絡(luò)學(xué)習(xí)環(huán)境。

［1］劉梓紅，房維強(qiáng).基于流媒體技術(shù)的三分屏課件制作［J］.現(xiàn)代教育技術(shù)，2009，(05).

［2］田嶺.關(guān)于JavaScript執(zhí)行效率的幾點(diǎn)思考［J］.電腦知識(shí)與技術(shù)，2011，(32).

［3］楊俊，李艷梅.JavaScript面向?qū)ο缶幊烫轿觯跩］.辦公自動(dòng)化，2010，(08).

［4］高芳裙，盧亮.淺析JavaScript面向?qū)ο缶幊痰膶?shí)現(xiàn)［J］.高等函授學(xué)報(bào)(自然科學(xué)版)，2011，(3).

［5］屈鵬飛.JavaScript網(wǎng)頁(yè)編程案例教程［M］.北京:清華大學(xué)出版社，2003，(2).

On the Programming of Network Courseware with Three－part－separated Screen

HOU Quan－jun

The network courseware of three－Part－Separated Screen is widely used in order to reduce production cost and technical difficulty.This article analyzes the functional requirements of the courseware of the three－part－separated screen based upon stream media and characteristics of JavaScript language.Making the course with rigorous design，and discussing the technical framework and programming，break through the core technical difficulties，it＇s provide a set of efficient solutions for network courseware of three－part－separated screen

Three－Part－Separated Screen;streaming media;programming;JavaScript language

TN919.8

A

1009－5152(2012)03－0069－03

2012－03－10

侯全軍(1979－ )，男，湖南廣播電視大學(xué)講師，湖南大學(xué)軟件工程碩士。