三分屏網(wǎng)絡課件的程序設計

侯全軍

(湖南廣播電視大學，湖南長沙 410004)

三分屏網(wǎng)絡課件的程序設計

侯全軍*

(湖南廣播電視大學，湖南長沙 410004)

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

三分屏;流媒體;程序設計;javascript語言

一、引言

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

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

二、功能要求

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

三、設計思路

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

四、技術框架

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

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

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

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

五、程序設計

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

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

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

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

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

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

六、結束語

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

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

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

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

［3］楊俊，李艷梅.JavaScript面向對象編程探析［J］.辦公自動化，2010，(08).

［4］高芳裙，盧亮.淺析JavaScript面向對象編程的實現(xiàn)［J］.高等函授學報(自然科學版)，2011，(3).

［5］屈鵬飛.JavaScript網(wǎng)頁編程案例教程［M］.北京:清華大學出版社，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－ )，男，湖南廣播電視大學講師，湖南大學軟件工程碩士。