王 東，林 宏，左 欣

(貴州師范學(xué)院a.數(shù)學(xué)與計(jì)算機(jī)科學(xué)學(xué)院;b.教育信息網(wǎng)絡(luò)中心;c.繼續(xù)教育學(xué)院，貴陽(yáng) 550018)

引言

隨著互聯(lián)網(wǎng)Web2.0和云計(jì)算等技術(shù)的成熟，網(wǎng)絡(luò)在線學(xué)習(xí)得到了前所未有的發(fā)展，近年來(lái)出現(xiàn)了一批在線學(xué)習(xí)平臺(tái)。學(xué)習(xí)者通過(guò)在線學(xué)習(xí)平臺(tái)參與各種學(xué)習(xí)活動(dòng)，其中，觀看視頻是最核心的學(xué)習(xí)環(huán)節(jié)。平臺(tái)通過(guò)自動(dòng)記錄學(xué)習(xí)者的觀看行為，將其作為評(píng)價(jià)或考核學(xué)習(xí)者的主要依據(jù)［1-3］。目前，多數(shù)在線學(xué)習(xí)平臺(tái)記錄觀看行為的方法仍比較簡(jiǎn)單，僅記錄學(xué)習(xí)者播放視頻的時(shí)間長(zhǎng)度，該方法未完整記錄下學(xué)習(xí)者的各種觀看行為。為了強(qiáng)制學(xué)習(xí)者必須觀看所有視頻片段，一些學(xué)習(xí)平臺(tái)隱藏了視頻播放器自帶的進(jìn)度控制功能，視頻只能從頭到尾按時(shí)間順序播放。這種方式限制了學(xué)習(xí)者的學(xué)習(xí)自主性，容易使學(xué)習(xí)者產(chǎn)生觀看疲勞，失去學(xué)習(xí)興趣。本文對(duì)視頻播放器的進(jìn)度條進(jìn)行了擴(kuò)展設(shè)計(jì)，實(shí)現(xiàn)對(duì)學(xué)習(xí)者觀看行為的實(shí)時(shí)采集、存儲(chǔ)和呈現(xiàn)，基本思路是:(1)重新設(shè)計(jì)播放器進(jìn)度條，用不同顏色分塊表示視頻片段的學(xué)習(xí)狀態(tài)，學(xué)習(xí)者對(duì)觀看過(guò)程有完全的播放控制權(quán)，以視頻片段被播放的覆蓋率作為學(xué)習(xí)的評(píng)價(jià)標(biāo)準(zhǔn);(2)播放進(jìn)度條自動(dòng)記錄和存儲(chǔ)學(xué)習(xí)者的詳細(xì)觀看行為數(shù)據(jù)，為學(xué)習(xí)者學(xué)習(xí)行為的跟蹤與分析提供基本依據(jù);(3)進(jìn)度條提供播放詳情的直觀呈現(xiàn)，讓學(xué)習(xí)者了解自己的學(xué)習(xí)過(guò)程。

1 視頻播放進(jìn)度條設(shè)計(jì)

視頻播放器自帶的播放進(jìn)度條只能顯示當(dāng)前播放的時(shí)間點(diǎn)，不能更加詳細(xì)的呈現(xiàn)已播放的各個(gè)片段。因此，我們對(duì)視頻播放器的進(jìn)度條進(jìn)行擴(kuò)展設(shè)計(jì)。用一個(gè)div作為自定義進(jìn)度條的容器，其背景色作為進(jìn)度條的背景色;用戶的每個(gè)觀看行為定義為一個(gè)播放片段，每個(gè)播放片段用一個(gè)span標(biāo)簽表示，span標(biāo)簽置于div容器中，span標(biāo)簽的背景色作為進(jìn)度條的前景色;用span標(biāo)簽的left屬性(左邊距)代表播放起點(diǎn)，width屬性表示播放片段的時(shí)間長(zhǎng)度。每個(gè)播放片段在用戶觸發(fā)播放器的播放行為事件時(shí)被初始化，每當(dāng)一個(gè)播放片段開(kāi)始時(shí)，在div容器中追加一個(gè)新的span標(biāo)簽，span標(biāo)簽在div容器中的位置代表播放開(kāi)始時(shí)間點(diǎn)，span標(biāo)簽的初始長(zhǎng)度為0。隨著視頻播放進(jìn)度的推進(jìn)，通過(guò)實(shí)時(shí)同步改變span標(biāo)簽的width屬性值，從而模擬出播放進(jìn)度不斷增加的效果。圖1為進(jìn)度條生成流程圖。

圖1 進(jìn)度條生成流程圖

實(shí)時(shí)同步需要用Web計(jì)時(shí)器采集播放器當(dāng)前播放點(diǎn)時(shí)間，因此，Web計(jì)時(shí)器的準(zhǔn)確性很關(guān)鍵。JavaScript提供的計(jì)時(shí)器最常用，但易受環(huán)境干擾，計(jì)時(shí)不準(zhǔn)確，因此，選用了jQuery［4］的 timer插件，計(jì)時(shí)準(zhǔn)確性較好。當(dāng)通過(guò)計(jì)時(shí)器采集到當(dāng)前播放點(diǎn)后，由于進(jìn)度條和視頻播放器自帶進(jìn)度條所使用的度量單位不相同(分別為像素和時(shí)間)，需要進(jìn)行單位轉(zhuǎn)換，轉(zhuǎn)換關(guān)系為:

式(1)將進(jìn)度條當(dāng)前進(jìn)度轉(zhuǎn)換為播放器的當(dāng)前播放時(shí)間，px為當(dāng)前span標(biāo)簽的width+left，div.width為進(jìn)度條總長(zhǎng)度，totaltime為視頻總時(shí)長(zhǎng);式(2)將播放器的當(dāng)前播放時(shí)間轉(zhuǎn)換為進(jìn)度條當(dāng)前進(jìn)度，time為視頻已播放時(shí)長(zhǎng)。

視頻播放過(guò)程中用戶執(zhí)行一系列播放控制，將在div容器中生成多個(gè)對(duì)應(yīng)的span標(biāo)簽，它們分散或者重疊地分布在div容器中，由于span標(biāo)簽的背景色是相同的，在用戶看來(lái)，是一個(gè)整體，從而完全模擬出分塊進(jìn)度條的效果。圖2描述了多個(gè)播放行為后進(jìn)度條的內(nèi)部結(jié)構(gòu)。

圖2是一次視頻觀看會(huì)話中分塊進(jìn)度條生成的分解圖。狀態(tài)①表示進(jìn)度條容器為空，用戶未執(zhí)行任何觀看行為;狀態(tài)②表示視頻載入后用戶執(zhí)行了播放并持續(xù)觀看了一個(gè)時(shí)間片段;狀態(tài)③表示用戶執(zhí)行暫停后再繼續(xù)播放了一個(gè)時(shí)間片段;狀態(tài)④表示用戶執(zhí)行了拖動(dòng)播放，并持續(xù)觀看了一個(gè)時(shí)間片段;狀態(tài)⑤表示用戶將播放器進(jìn)度往前拖動(dòng)播放，觀看的時(shí)間片段與之前的時(shí)間片段有相交;狀態(tài)⑥表示用戶將播放器進(jìn)度往前拖動(dòng)播放，觀看的時(shí)間片段包含于之前的時(shí)間片段中;狀態(tài)⑦表示狀態(tài)疊加后呈現(xiàn)的整體效果。

圖2 視頻播放觀看會(huì)話分解圖

2 用戶觀看行為數(shù)據(jù)抽取

在線視頻觀看行為數(shù)據(jù)對(duì)進(jìn)行教育大數(shù)據(jù)分析具有不可估量的價(jià)值，通過(guò)對(duì)海量學(xué)習(xí)行為進(jìn)行深入挖掘，對(duì)用戶的學(xué)習(xí)行為進(jìn)行跟蹤、記錄并建模分析，就能全面跟蹤、掌握學(xué)習(xí)者的學(xué)習(xí)行為、學(xué)習(xí)過(guò)程和學(xué)習(xí)特點(diǎn)，從而有針對(duì)性地改善課程視覺(jué)效果和教學(xué)方法［5-7］。所設(shè)計(jì)的進(jìn)度條本身具備存儲(chǔ)用戶學(xué)習(xí)行為的功能，但通過(guò)網(wǎng)頁(yè)上的html標(biāo)簽存儲(chǔ)用戶觀看行為數(shù)據(jù)是暫時(shí)的，當(dāng)頁(yè)面被刷新或重新載入時(shí)數(shù)據(jù)會(huì)被清除。因此，需要將用戶觀看行為數(shù)據(jù)存儲(chǔ)到服務(wù)端數(shù)據(jù)庫(kù)中。為了減少客戶端與服務(wù)端連接的次數(shù)，客戶端并不會(huì)實(shí)時(shí)向服務(wù)器提交行為數(shù)據(jù)，采取定時(shí)提交行為數(shù)據(jù)的方法。通過(guò)定義一個(gè)DBCLOCK計(jì)時(shí)器，每隔一定時(shí)長(zhǎng)向服務(wù)器提交一次行為數(shù)據(jù)。客戶端向服務(wù)器提交的行為數(shù)據(jù)為進(jìn)度條容器中所有span標(biāo)簽上的屬性值集合，通過(guò)遍歷div容器中的span標(biāo)簽并獲取屬性值，得到一個(gè)二維數(shù)組，再用JSON.stringify()方法處理后作為$.post提交方法的參數(shù)傳遞給后臺(tái)處理程序。后臺(tái)處理程序用json_decode方法解析后還原成二維數(shù)組，將二維數(shù)組中的每行插入到行為數(shù)據(jù)表中。在向服務(wù)器提交數(shù)據(jù)時(shí)，為了不刷新頁(yè)面，采用 AJAX［8-9］技術(shù)提交數(shù)據(jù)，用 JSON［10-11］作為數(shù)據(jù)交換格式。同時(shí)為了避免寫入重復(fù)數(shù)據(jù)，寫入前先將同次視頻觀看會(huì)話的所有記錄刪除，再將前端播放數(shù)據(jù)寫入數(shù)據(jù)庫(kù)。

在span標(biāo)簽自定義6個(gè)屬性(action，playdatatime，playstarttime，playendtime，dragstarttime，dragendtime)，用以記錄用戶的觀看行為。其中，action表示播放類型，其取值為{‘play’，‘pauseplay’，‘dragplay’}，分別表示載入后播放、暫停后播放和拖動(dòng)播放;playdatatime為初始化視頻時(shí)系統(tǒng)的當(dāng)前時(shí)間;playstarttime存儲(chǔ)當(dāng)前片段播放的開(kāi)始時(shí)間點(diǎn)，playendtime存儲(chǔ)當(dāng)前片段播放的結(jié)束時(shí)間點(diǎn);dragstarttime表示拖動(dòng)起點(diǎn);dragendtime表示拖動(dòng)結(jié)束點(diǎn)。dragstarttime和 dragendtime只在action取值dragplay時(shí)有效，代表拖動(dòng)起點(diǎn)和拖動(dòng)結(jié)束點(diǎn);當(dāng)action取值play或pauseplay時(shí)，dragstarttime和dragendtime被定義為0。相應(yīng)地，在數(shù)據(jù)庫(kù)中建立學(xué)習(xí)行為記錄表存儲(chǔ)每個(gè)span標(biāo)簽的屬性值(表1)。

表1 學(xué)習(xí)行為記錄表

表1中每一條記錄代表用戶觀看的一個(gè)時(shí)間片段，videoID唯一標(biāo)識(shí)一個(gè)視頻，userID標(biāo)識(shí)一個(gè)用戶。給定videoID和userID條件下，playdatetime值相同的所示記錄表示一個(gè)用戶的一次觀看會(huì)話的所有觀看行為。通過(guò)left字段和width字段，可以在客戶端頁(yè)面上生成歷史播放詳情。通過(guò)統(tǒng)計(jì)playstarttime和playendtime字段可以獲得時(shí)間片段長(zhǎng)度，統(tǒng)計(jì):dragstarttime和dragendtime可以獲得播放過(guò)程中被跳過(guò)的視頻片段。當(dāng)海量數(shù)據(jù)記錄形成后，這些數(shù)據(jù)將成為大數(shù)據(jù)分析的有力證據(jù)，比如:當(dāng)某個(gè)視頻片段經(jīng)常被用戶跳過(guò)，就有可能是這部分視頻制作不清，或者是課程內(nèi)容安排不當(dāng)。

要記錄視頻觀看行為數(shù)據(jù)，就要準(zhǔn)確捕獲用戶的播放行為。大多數(shù)視頻播放器都提供一系列監(jiān)聽(tīng)事件接口，只需要在監(jiān)聽(tīng)事件中編寫好相應(yīng)的處理程序即可。本文所使用的是ckplayer播放器，表2中列出了使用到的監(jiān)聽(tīng)事件及該事件中要執(zhí)行的主要?jiǎng)幼鳌?/p>

表2 監(jiān)聽(tīng)事件列表

3 歷史觀看行為數(shù)據(jù)呈現(xiàn)

載入歷史播放數(shù)據(jù)的過(guò)程就是將數(shù)據(jù)庫(kù)中符合條件的記錄在Web端生成相應(yīng)標(biāo)簽的過(guò)程。主要呈現(xiàn)內(nèi)容包括兩個(gè)方面:一是歷史總播放進(jìn)度，將當(dāng)前觀看者、當(dāng)前視頻的所有歷史記錄進(jìn)行合并后在前端呈現(xiàn)一條進(jìn)度條;二是歷史播放詳情，將當(dāng)前觀看者、當(dāng)前視頻的所有記錄按播放時(shí)間會(huì)話分組合并，每個(gè)會(huì)話形成一條進(jìn)度條呈現(xiàn)在前端。

用戶在一次觀看會(huì)話中往往會(huì)觸發(fā)若干觀看行為，數(shù)據(jù)表中存儲(chǔ)了許多記錄，如果將每條記錄在前端頁(yè)面上生成一個(gè)span標(biāo)簽，在初始化前端頁(yè)面時(shí)會(huì)增加負(fù)載。因此，在后臺(tái)處理程序中將每次播放的歷史數(shù)據(jù)進(jìn)行合并后再輸出到前端。由于數(shù)據(jù)表中的每一條記錄對(duì)應(yīng)一個(gè)span標(biāo)簽，采用span標(biāo)簽的合并來(lái)描述數(shù)據(jù)表記錄的合并操作。分析觀看會(huì)話中產(chǎn)生的span標(biāo)簽，span標(biāo)簽之間可能產(chǎn)生三種關(guān)系:(1)相離關(guān)系:span1和span2無(wú)重疊;(2)相交關(guān)系:span1和span2部分區(qū)域重疊;(3)包含關(guān)系:span2完全位于span1區(qū)域內(nèi)，如圖3所示。

合并后的狀態(tài):對(duì)于(1)來(lái)說(shuō)，不需要合并;對(duì)于(2)，修改span1的width值，刪除 span1;對(duì)于(3)，直接刪除span2。

圖3 span標(biāo)簽關(guān)系圖

觀看行為記錄的合并過(guò)程描述如下:

Step 1:對(duì)所有span標(biāo)簽按left屬性值升序排列;

Step2:若span標(biāo)簽數(shù)大小2，反復(fù)執(zhí)行:

Step 2.1從第1個(gè)標(biāo)簽開(kāi)始至第n-1個(gè)標(biāo)簽，取相鄰span標(biāo)簽，反復(fù)執(zhí)行:

Step 2.2若兩個(gè)span標(biāo)簽為包含關(guān)系，刪除第二個(gè)span標(biāo)簽，跳step2;

Step 2.3若兩個(gè)span標(biāo)簽為相交關(guān)系，更新第一個(gè)span標(biāo)簽的 width屬性值，刪除第二個(gè) span標(biāo)簽，跳step2。

4 進(jìn)度條標(biāo)尺及參考線設(shè)計(jì)

帶標(biāo)尺及參考線的進(jìn)度條能顯著提高用戶體驗(yàn)，用戶可直觀地觀察到視頻的時(shí)間刻度及播放進(jìn)度。生成標(biāo)尺首先需要準(zhǔn)備一張帶刻度線的圖作為標(biāo)尺容器的背景圖，背景圖水平平鋪橫向填充標(biāo)尺容器。標(biāo)尺的刻度值則需要根據(jù)視頻時(shí)長(zhǎng)動(dòng)態(tài)生成。

參考線的主要作用包括兩個(gè)方面:一方面作為對(duì)齊播放片段的垂直參考線，當(dāng)鼠標(biāo)移動(dòng)到進(jìn)度條容器區(qū)域內(nèi)會(huì)跟隨鼠標(biāo)移動(dòng)，方便用戶察看觀看片段的時(shí)間點(diǎn);另一個(gè)方面是作為當(dāng)前播放頭實(shí)時(shí)向后移動(dòng)。為協(xié)調(diào)好參考線的呈現(xiàn)，當(dāng)鼠標(biāo)位于進(jìn)度條內(nèi)時(shí)，使參考線隨鼠標(biāo)移動(dòng)，當(dāng)鼠標(biāo)離開(kāi)進(jìn)度條區(qū)域外時(shí)，使參考線作為播放頭實(shí)時(shí)向后移動(dòng)。

5 用戶觀看行為抽取實(shí)證分析

為驗(yàn)證本文所述方法的有效性，準(zhǔn)備了一個(gè)時(shí)長(zhǎng)為3.37分鐘的視頻文件，在播放視頻過(guò)程中多次模擬學(xué)習(xí)者的各種觀看行為，分別執(zhí)行載入視頻后播放、播放中暫停、暫停后繼續(xù)播放、播放中拖動(dòng)、暫停中拖動(dòng)、不同方向的拖動(dòng)播放等觀看行為，并在此過(guò)程中進(jìn)行人工記載。通過(guò)歷史觀看行為數(shù)據(jù)的重新呈現(xiàn)。如圖4所示，與人工記載的學(xué)習(xí)斷點(diǎn)完全吻合，學(xué)習(xí)者的各種觀看行為被準(zhǔn)確的記錄了下來(lái)。

圖4 歷史播放詳情運(yùn)行圖

6 結(jié)束語(yǔ)

知識(shí)全球化的MOOC運(yùn)行，以一種新型的學(xué)習(xí)方式正在興起，這種以學(xué)習(xí)者在線觀看視頻為主的學(xué)習(xí)形式，不僅要求視頻內(nèi)容制作要有過(guò)硬的質(zhì)量，也對(duì)播放過(guò)程的用戶體驗(yàn)及用戶觀看行為數(shù)據(jù)的分析提出了很高的要求。本文基于開(kāi)源播放器擴(kuò)展了播放進(jìn)度條的設(shè)計(jì)，有效解決了用戶觀看行為數(shù)據(jù)的記錄與呈現(xiàn)問(wèn)題，使學(xué)習(xí)者能夠精確地觀察了解自己的學(xué)習(xí)過(guò)程，增強(qiáng)了播放器的用戶體驗(yàn)，也為用戶學(xué)習(xí)行為大數(shù)據(jù)分析儲(chǔ)備了數(shù)據(jù)。

[1] 楊金來(lái),洪偉林,張翼翔.網(wǎng)絡(luò)學(xué)習(xí)行為的實(shí)時(shí)監(jiān)控研究與實(shí)踐[J].開(kāi)放教育研究,2008,14(4):87-92.

[2] 楊玉芹.MOOC學(xué)習(xí)者個(gè)性化學(xué)習(xí)模型建構(gòu)[J].中國(guó)電化教育,2014(6):6-10.

[3] 呂佳寧,魏芳.大數(shù)據(jù)下網(wǎng)絡(luò)視頻類用戶行為分析[J].新聞愛(ài)好者,2014(7):38-40.

[4] 潘杰,周傳生.基于jQuery框架的Web研究與實(shí)現(xiàn)[J].沈陽(yáng)師范大學(xué)學(xué)報(bào):自然科學(xué)版,2015,33(1):96-99.

[5] 蔣卓軒,張巖,李曉明.基于MOOC數(shù)據(jù)的學(xué)習(xí)行為分析與預(yù)測(cè)[J].計(jì)算機(jī)研究與發(fā)展,2015,52(3):614-628.

[6] 胡藝齡,顧小清,趙春.在線學(xué)習(xí)行為分析建模及挖掘[J].開(kāi)放教育研究,2014,20(2):102-108.

[7] 彭文輝,楊宗凱,黃克斌.網(wǎng)絡(luò)學(xué)習(xí)行為分析及其模型研究[J].中國(guó)電化教育,2006(10):31-35.

[8] 呂林濤,萬(wàn)經(jīng)華,周紅芳.基于Ajax的Web無(wú)刷新頁(yè)面快速更新數(shù)據(jù)方法[J].計(jì)算機(jī)應(yīng)用研究,2006,23(11):199-223.

[9] 熊文,熊淑華,孫旭,等.Ajax技術(shù)在 Web2.0網(wǎng)站設(shè)計(jì)中的應(yīng)用研究[J].計(jì)算機(jī)技術(shù)與發(fā)展,2012,22(3):145-148.

[10] 屈展,李嬋.JSON在Ajax數(shù)據(jù)交換中的應(yīng)用研究[J].西安石油大學(xué)學(xué)報(bào):自然科學(xué)版,2011,26(1):95-98.

[11] 李志秀,張軍,陳光,等.jQuery Ajax異步處理JSON數(shù)據(jù)在項(xiàng)目管理系統(tǒng)中的應(yīng)用[J].云南大學(xué)學(xué)報(bào):自然科學(xué)版,2011,33(S2):247-250.