讓在線教學更靈活，你還需知道：如何讓Sakai里的視頻“活”起來

2016-11-22 06:24:16馬晨輝趙春徐艷艷沈富可

中國教育網絡 2016年8期

關鍵詞：用戶系統教學

文/馬晨輝趙春,2 徐艷艷沈富可

文/馬晨輝1趙春1,2徐艷艷1沈富可1

作為世界上最大的開源教學平臺，Sakai系統對視頻功能的支持卻相對簡單，難以滿足高校日常化教學的需要，這也是目前很多高校在使用Sakai來建設教學平臺過程中面對的共同問題。

Sakai是由美國印第安納大學、密西根大學、斯坦福大學、麻省理工學院于2004年共同開發的開源課程管理系統；目前，Sakai在世界范圍內被廣泛使用，在國內外一流高校中的應用尤為普遍，已日益成為高校教學過程中的重要手段。

Sakai系統以J2EE中的Spring + Hibernate框架作為其基本框架，為用戶提供基本表示層和交互服務；具體的教學功能主要以工具插件的形式給用戶提供服務，如通知、日程、課程大綱、論壇、作業、在線測試等工具，為用戶提供課程內容組織、課程資源管理、在線交流等服務。

近年來，隨著視頻公開課和MOOC的發展，教學視頻逐漸成為各類教學平臺的核心內容。以教學和視頻為關鍵字搜索近十年的研究文獻，先以“視頻”和“教學”同時為關鍵字搜索的文獻數量，再單獨以“教學”為關鍵字搜索到的文獻情況，結果如表1：

表 1 近十年視頻在教學研究中的比例趨勢

表1中各列第二行與第三行的比例，可以視作教學研究中對視頻研究的熱度，如圖1所示。

圖 1 近十年視頻在教學研究中的比例趨勢

從圖1中不難發現，近十年對教學視頻的研究呈迅速增長的態勢，尤其是從2012年開始，隨著MOOC的興起，在教學平臺中引入教學視頻迅速成為近年教學研究的熱點。然而，這一波研究浪潮與Sakai教學平臺關聯甚少。以Sakai和視頻為關鍵字進行搜索，僅搜到兩篇文獻?！兑曨l播放控件在Sakai中的兼容性實踐》從本地化的角度，針對Sakai自帶視頻插件的編碼問題，分析了不能正常播放教學視頻的原因，并提出了解決方法；《開源視頻系統在Sakai中的集成與應用》引入了開源視頻系統Kaltura，使用插件開發的方式拓展Sakai系統對視頻的支持。

作為世界上最大的開源教學平臺，Sakai系統對視頻功能的支持卻相對簡單，難以滿足高校日常化教學的需要，這也是目前很多高校在使用Sakai來建設教學平臺過程中面對的共同問題；而目前已有研究僅僅局限對本地化問題的解決和獨立插件與開源系統對接，沒有考慮到視頻資源與其他教學資源以及知識單元的關聯性，難以實現在教學平臺中將教學內容與視頻的深入整合，因此有必要對Sakai與視頻的契合展開研究，這也是本文的研究起點。

圖 2 Sakai原生視頻框架

系統架構設計

針對Sakai平臺對視頻支持薄弱這一現狀，筆者從Sakai視頻支持框架著手，分析該框架存在的缺陷，并對Sakai教學平臺視頻支持實施重新設計，將視頻服務從Sakai平臺的耦合中獨立出來，同時對Sakai的教學資源整合工具Lessonbuilder進行二次開發，并與視頻平臺進行對接，從而優化視頻資源的管理與提高訪問視頻服務的用戶體驗。

Sakai原生框架分析

Sakai對視頻的支持零散而單一，其視頻支持框架如圖2所示。

從圖2中可以看出，Sakai系統自身對視頻的支持主要通過Lessonbuilder和Content組件進行集成。Lessonbuilder組件主要集成了視頻上傳和播放的入口，用戶可以通過上傳模塊上傳本地PC上的視頻、引用視頻鏈接以及獲取已經上傳的視頻并將請求提交給Content組件進行后續處理，上傳成功之后通過調用自帶Flash視頻播放器進行視頻播放；Content組件是Sakai的資源統一管理組件，接收來自Lessonbuilder組件的上傳請求后，將文件名進行編碼并存儲到Sakai自身服務器存儲上，并生成文件訪問映射寫入數據庫記錄中，當接收到來自Lessonbuilder的訪問視頻請求時，通過數據庫的映射記錄來訪問視頻文件。

盡管原有的視頻框架能夠滿足最基本的視頻資源需求，但同時也伴隨著無法忽視的缺陷：

1.視頻播放存在性能瓶頸。

相對于教學平臺的其他功能模塊，視頻上傳、存儲及播放有其特殊性，隨著視頻資源及的用戶數增加，對服務器的CPU、內存、I/O、帶寬、存儲空間的要求會急劇增加，從而影響教學平臺其他基本功能的響應，造成系統等待超時甚至宕機，這是非常大的故障風險點。

2.視頻播放器的兼容性較差。

Sakai系統自帶視頻播放器對視頻文件的兼容性及用戶終端對視頻播放器的兼容性都有一定的問題。在Lessonbuilder組件中上傳視頻資源后，系統自動調用Flash播放器進行視頻播放，而Flash視頻播放器本身支持的視頻格式較少。同時，隨著移動設備的普及與校園無線網絡的全覆蓋，越來越多的人使用各種移動終端來訪問系統，而Sakai自帶Flash播放器在移動設備上的兼容性較差，在這些終端上往往無法正常播放。

3.視頻管理缺乏統一標準。

在Sakai教學平臺中，系統本身對上傳視頻的格式沒有任何過濾和限制，也沒有提供統一轉換視頻編碼的功能支持，用戶可以上傳任意格式的視頻甚至非視頻文件，而實際上由于其自帶播放器在兼容性上的缺陷，從而導致了并不是每個上傳的視頻都能夠正常播放，同時也造成了資源管理上的混亂。

Sakai新框架設計

針對原有視頻支持框架的弊端，對視頻框架進行重新設計，如圖3所示。

圖 3 重新設計的視頻框架

在新的視頻框架中，將視頻服務獨立出來，以接口服務的形式對Sakai系統中的組件提供支持。同時，對Lessonbuilder組件中的用戶層進行二次開發，調用視頻平臺上傳接口進行視頻資源上傳，并將返回的視頻訪問信息存入數據庫，實現本地僅僅存放引用，而不存放文件本身。另外，替換Lessonbuilder組件自帶視頻播放器，結合視頻平臺轉碼服務，實現視頻編碼格式的統一與播放的穩定性。

視頻上傳流程設計

獨立的視頻平臺能夠避免多用戶并發訪問給教學平臺本身帶來額外的壓力,同時新增的視頻轉碼服務對視頻的編碼格式進行統一處理，增加了視頻的可播放性，系統主要邏輯如圖4所示。

視頻服務器接收到上傳請求時，將視頻文件保存在視頻服務器的存儲上。目前，由于MP4幾乎能夠被所有移動設備、操作系統原生支持，有著非常良好的兼容性，因此采用MP4作為系統中的統一編碼格式。視頻服務器對用戶上傳的視頻編碼進行判斷，如果不是MP4格式，則調用轉碼服務將其轉成MP4格式之后再存儲。存儲成功后生成視頻id并保存視頻相關信息至數據庫，同時返回視頻的訪問地址等信息。

視頻上傳結束，用戶可以直接訪問返回的視頻播放地址，或是使用播放器進行視頻播放。

當視頻服務器接收到刪除請求時，根據請求的視頻id，刪除相應的視頻文件和數據庫記錄，并返回刪除結果。

圖 4 獨立視頻服務

系統開發與集成

基于以上系統架構設計，需要進行視頻系統開發、Lessonbuilder組件二次開發以及Sakai系統與視頻系統的集成。

視頻系統二次開發

為了不影響視頻系統本身的正常運行，需要將待開發的功能與原有功能進行代碼層面的隔離，因此需要在原有視頻系統的基礎上做增量開發。

1.基本功能分析

視頻系統主要包括上傳視頻和刪除視頻兩個功能。為了統一視頻的編碼格式，系統還應當包含視頻編碼轉換的功能。

2.功能用例描述

為了增加系統的可擴展性，這里不具體定義上傳和刪除視頻請求的客戶端（Client），具體對接時再詳細定義。通過用例圖進行功能描述，如圖5所示。

3.基本類與主要成員描述

系統收到客戶端請求后，一方面要對上傳的文件進行操作，另一方面需要記錄視頻的相關信息以及請求的相關參數，因此基本類應劃分為文件操作類和數據庫操作類，基本類及其主要成員如圖6所示。

UploadHandler是處理視頻上傳文件的基本類，主要成員變量options是數組類型的數據，主要描述了服務器上存儲視頻的目錄；成員方法中，handle_ file_upload是處理視頻文件上傳的主要方法，上傳完成后，再執行generate_response方法，回傳相關信息給請求的客戶端。

content_model是數據庫操作基本類，主要成員變量category用來記錄視頻所在的欄目，便于視頻的分類處理；成員方法add_content(data)在上傳時將視頻相關信息記錄至數據庫，delete_content(id, catid)方法用來刪除已經存在的視頻。

圖5 功能用例描述

4.數據庫設計

視頻系統在存儲視頻時，需要將視頻的相關信息存入數據庫，刪除視頻時也需要根據數據庫中已有的記錄進行操作，其數據庫表結構如下：

由于用戶上傳視頻的編碼格式多種多樣，而用戶觀看視頻使用的終端設備以及瀏覽器也不盡相同，很可能會因為兼容性問題而出現視頻無法播放的情況。為了增加視頻播放的兼容性，需要將視頻的編碼格式進行統一。MP4是當前世界上較為主流的一種視頻封裝格式，能夠兼容絕大多數瀏覽器，更是當前流行的Html5技術原生支持的視頻格式，因此在本系統中采用MP4作為統一視頻編碼格式。

FFMPEG是一個集錄制、轉換、音/視頻編解碼功能為一體的、完整的開源解決方案，支持MPEG、DivX、MPEG4、AC3、DV、FLV等40多種編碼，AVI、MPEG、OGG、ASF等90多種解碼，完全能夠滿足本系統的轉碼需求。

Lessonbuilder組件二次開發

圖6 基本類與主要成員描述

Lessonbuilder是Sakai平臺中的教學內容組織工具，它可以將各種教學文檔、圖片、音視頻、作業、在線測試、討論主題等教學元素按照特定的方式組織起來，并呈現完整的知識單元與情境，實現了各類教學資源的深度融合。

表 2 視頻信息表video

根據新的視頻框架設計，為了與獨立的視頻平臺進行對接，需要對Lessonbuilder組件中的視頻上傳模塊進行二次開發，并替換播放模塊中自帶的播放器。

Lessonbuilder組建使用了 RSF（Reasonable Server Faces）開發框架，RSF是一個基于Spring的輕量級開源框架，用戶層使用純XHTML模板進行開發。

1.前端頁面開發

在Lessonbuilder組件中，用戶層上傳視頻的模板文件是ShowPage.html，需要對其中的上傳視頻部分的代碼進行二次開發，首先需要修改前臺頁面，主要代碼如下：

<！--視頻上傳表單--提交至視頻服務器-->

<！-- 文件上傳標簽及上傳進度-->

<！--隱藏待提交視頻信息視頻信息-->

<！--上傳文件返回地址-->

<！--上傳分類-->

<！--視頻名稱-->

<！--提交按鈕-->

<！--提交視頻表單--保存在Sakai系統-->

在這個頁面中主要包含兩個表單，一是提交至視頻服務器的表單，用來將視頻文件和視頻信息提交至服務器；另一個是提交至Sakai系統的隱藏表單，用來暫存視頻系統返回的視頻訪問信息，為了簡化呈現給用戶的信息，這個表單在樣式上對用戶透明。

然后使用JavaScript技術開發前端上傳功能，首先通過jQueryFileUpload插件上傳視頻文件，再使用Ajax技術提交視頻相關信息至視頻平臺，同時將回傳視頻訪問信息保存至Sakai系統中，主要代碼如下：

//上傳文件至視頻服務器

jQuery('#fileupload').fileupload({

url: url, dataType: 'json', formAcceptCharset: 'utf-8', done: function(e, data) {

jQuery.each(data.result.files, function(index, file) { if (file.error) {

alert("上傳文件出錯：" + file.error);

} else {

$('#commit_videoinfo_tip').html("上傳成功，請填寫視頻信息并提交。"); $('#hiddenvidoeinfo').show();

}});},

//提交視頻信息至視頻服務器

$.ajax({

type:"post", url:url, data:datas,//提交表單success:function(msg){

try {

var dataObj=eval("("+msg+")"); }catch(exception) {

alert("服務端執行出錯，嘗試重新上傳。"); return false; }

$('#mm-add-item').click();//觸發回傳信息保存至Sakai系統

},});

//保存信息至Sakai系統function UpTolocal(){

var mydata=jQuery('#upload-form').serialize();

//將上傳產生的數據保存到本地數據庫

jQuery.ajax({

url:url,data: vdata,

success:function(data){

// alert("保存到數據庫成功"); }});

}

其中，通過用戶點擊頁面中的保存按鈕，觸發Ajax提交表單至視頻服務器，返回的結果以JSON格式存儲在msg變量中；從msg變量中解析出視頻文件在服務器上的邏輯訪問名，再與固定URL進行拼接，從而形成可訪問的視頻地址；最后通過自動觸發隱藏表單中提交按鈕的click事件，調用UpToLocal函數將視頻信息提交至Sakai Lessonbuilder組件的控制層。

由于原有的Flash播放器設備兼容性較差，需要替換兼容性更好的Web播放器，這里我們選用當前較為流行的JWPlayer播放器。JWPlayer是一款開源播放器，支持響應式開發，能夠兼容當下絕大多數設備。

由于用戶可能需要在同一頁面嵌入多個視頻，因此使用IteamArr[i]數組循環加載需要播放的視頻。

2.控制層開發

控制層主要用來獲取前端頁面的請求數據，并向模型發送數據。在Lessonbuilder中新建控制層SaveUploadInfo類，用來控制轉發視頻信息。

其中，使用System.currentTimeMillis函數獲取當前系統時間戳，也就是視頻上傳的時間作為視頻的唯一標識id，既能夠記錄視頻上傳的時間，又能在存入數據庫時保證數據表主鍵的唯一性。

3.邏輯層開發

Lessonbuilder組件使用Hibernate技術存儲數據，因此邏輯層開發也使用Hibernate對數據進行持久化操作。

4.接口開發

為了實現在Sakai系統中上傳視頻到視頻系統，需要在視頻系統中開發上傳接口。該接口能夠接收來自Sakai系統的視頻上傳請求，并調用基本類UploadHandler處理上傳，主要代碼如下：

require('UploadHandler.php');

$key=；

$token=$_GET['token'];

$timestamp=$_GET['timestamp'];

if($token==md5($timestamp.$key)){

$upload_dir='uploadfile/video/org/';

$options=array('upload_dir'=>$upload_dir,'upload_ url'=>$upload_dir);

$upload_handler = new UploadHandler($options);

}

代碼中調用并實例化了基本類UploadHandler來處理上傳，另外使用了時間戳和密鑰拼接，以md5加密的方式作為上傳口令，提高了接口的安全性。

跨域上傳

由于大多數瀏覽器中存在同源策略(Same-Origin Policy)的安全限制，使得客戶端腳本語言只能訪問在同一域下的內容，而教學平臺和視頻平臺是兩臺不同的服務器，要求數據在不同的域之間進行通信，因此會導致上傳視頻請求失敗。

常用的跨域解決方案有兩種，一種是JSONP方案，主要是針對同源策略不阻止瀏覽器腳本動態元素插入的特點，通過動態插入〈Script〉標簽，可以實現跨域通信；另一種是CORS，它是一種跨域資源共享方案，通過新增一系列HTTP頭，讓服務器聲明哪些來源可以通過瀏覽器訪問該服務器上的資源。

由于JSONP只支持GET請求，GET請求數據大小一般限制在2k到200k范圍，服務器接收GET請求數據大小一般也限制在16k以內，而一般視頻文件的大小遠遠超過這個范圍；同時，CORS不僅支持不限制大小的POST請求，也支持GET和OPTIONS請求，因此采用支持多種請求的CORS方案。

在視頻服務器上的上傳接口中添加接受跨域請求的聲明。

服務器返回如下響應頭，即表示該服務器接收了客戶端瀏覽器的跨域請求，如圖7所示。

圖7 服務器返回至客戶端瀏覽器的響應頭

系統應用效果

功能實現效果

1.上傳視頻

在課程信息(Lessonbuilder)頁面中點擊添加視頻，彈出添加視頻對話框。

點擊“選擇本地文件按鈕”，選則用戶電腦上的視頻文件上傳至視頻平臺；然后填寫視頻標題，點擊“保存”按鈕，先后觸發將視頻信息保存在視頻平臺，并將回傳的視頻訪問地址保存在Sakai系統中。

2. 播放視頻

視頻上傳完成后，頁面上就可以看到剛剛上傳的視頻。

在瀏覽器下方顯示的請求信息中，視頻的請求URL為視頻平臺的地址，用戶觀看視頻時實際上是在訪問視頻平臺，從而減少了對教學平臺服務器帶寬、存儲空間等資源的占用，實現了視頻服務的獨立。

系統應用的關注點

1.視頻轉碼方式的考量

在實際應用中視頻轉碼的處理不見得一定依賴于平臺。對用戶來說，在本地使用轉碼工具轉碼后再上傳，需要少量的本地操作，比直接上傳轉碼略多一些操作的時間；然而當視頻文件體積較大或者網絡情況較差時，大大增加的等待時間會帶來一定的不確定性，上傳操作會一直占用頁面，由于HTTP上傳無法暫停，視頻上傳一旦中斷，用戶必須重新上傳，大大降低了用戶體驗。

同時，由于視頻轉碼主要與CPU頻率相關，隨著個人PC的飛速發展，用戶終端的CPU頻率往往不遜于服務器CPU，而網絡傳輸與并發壓力往往帶來一定的不確定性。因此建議在頁面上增加提示信息，提示用戶盡量上傳MP4格式的視頻以減少等待時間。

2.視頻平臺選型的考量

在視頻平臺選型方面，一般有商業平臺和開源平臺兩種選擇。商業平臺的優勢在于有完善的項目和案例經驗，有專門的商業團隊承擔平臺的部署實施和運維，節省了高校信息化部門的人力成本，不足之處在于平臺核心代碼封閉，難以了解平臺內部運行機制，定制較為困難；開源平臺的優勢在于核心代碼開放，可以針對特定需求靈活定制，缺點是需要對開源平臺進行大量深入的研究與本地化工作，部署開發與維護的人力成本較高，同時平臺迭代速度較快，定制開發在平臺升級后會產生額外的功能遷移工作。

由于作者所在學校已經存在一套正在運行的商業視頻平臺，因此沒有嘗試使用開源的視頻平臺。本文中所有的研發工作都是在不影響原有平臺功能的基礎上做的增量，開發了教學平臺上傳視頻的專用接口。

本文在分析Sakai架構的基礎上，針對Sakai 目前對視頻支持不足的問題，進行了視頻服務集成開發過程及使用效果，為完善高校教學使用Sakai建設教學平臺起到了積極的作用。同時，獨立出來的視頻服務，日后也可以應用在其他平臺上，為高校集成視頻服務建設提供一種思路。為了提升整體教學平臺的可用性，筆者的后續研究將關注以下幾點：（1）增加數據收集功能，能夠統計Sakai里使用了視頻整合這塊的課程，分析視頻整合工具的使用率，關注視頻應用的實際效果；（2）關注視頻平臺的性能，以及可行的提升性能的手段。

（作者單位：1為華東師范大學信息化辦公室，2為華東師范大學教育學部教育信息技術學系）

注：本文中有大量代碼，由于版面原因不能全部展示，完整版本可參照《中國教育網絡》8月刊電子版，網址為：www.media.edu.cn）