視頻交互技術(shù)在在線教育中的應(yīng)用與實(shí)現(xiàn)

吳子朝 柯佳興

摘要：當(dāng)前，在線教育大多數(shù)只是單純的播放視頻，存在互動(dòng)性的缺失問(wèn)題，導(dǎo)致教學(xué)效果并不理想。論文研究豐富在線視頻的交互形式來(lái)提高學(xué)習(xí)者的學(xué)習(xí)體驗(yàn)，實(shí)現(xiàn)了豐富交互功能的視頻播放器以及交互數(shù)據(jù)可視化前端平臺(tái)，打破傳統(tǒng)的在線教育枯燥乏味的視頻播放形式，為在線教育視頻提供一個(gè)新的發(fā)展方向。

關(guān)鍵詞：在線教育;視頻教育;MOOC;交互技術(shù);教育平臺(tái)

中圖分類(lèi)號(hào)：TP311? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）02-0184-02

Abstract： At present， most of online education is just playing videos， which leads to the lack of interactivity， leading to the unsatisfactory teaching effect. This paper studies how to enrich the interactive forms of online video to improve the learning experience of learners， and realizes the video player with rich interactive functions and interactive data visualization front-end platform， which breaks the traditional dull video playing form of online education， and provides a new development direction for online education.

Key words： online education; video educaion; MOOC;interactive technology;education platform

1 引言

如今，在線教育[1]已經(jīng)成了一種新興的學(xué)習(xí)方式，相對(duì)于傳統(tǒng)線下教育來(lái)講，在線教育可以忽視師生雙方時(shí)間以及空間上的差異，通過(guò)互聯(lián)網(wǎng)來(lái)進(jìn)行知識(shí)的傳授與接受，極大地提升教育的效率。基于這一趨勢(shì)，在面向社會(huì)大眾的領(lǐng)域中，出現(xiàn)了網(wǎng)絡(luò)公開(kāi)課、精品課程、MOOC等在線學(xué)習(xí)平臺(tái)。目前，知名的在線教育平臺(tái)，國(guó)內(nèi)有網(wǎng)易云課堂、騰訊云課堂、慕課網(wǎng)等，國(guó)外有Youtube，Udacity，khan academy，Edx等。

雖然在產(chǎn)業(yè)界廣泛應(yīng)用，在線教育視頻[2]主要也存在互動(dòng)性不足的問(wèn)題，即知識(shí)的傳授過(guò)程是一個(gè)被動(dòng)過(guò)程，缺乏學(xué)習(xí)的交流和效果反饋。學(xué)習(xí)者幾乎沒(méi)有靈活性來(lái)適應(yīng)學(xué)習(xí)內(nèi)容和過(guò)程，以滿(mǎn)足他們的個(gè)人需求[3]。例如，無(wú)法個(gè)性化的判斷學(xué)習(xí)者的知識(shí)掌握情況等。因此，這樣的在線教育視頻可能最終的效果并不理想。目前，領(lǐng)域也有一些工作來(lái)嘗試解決這些問(wèn)題，例如：國(guó)外已經(jīng)存在采用交互式視頻的在線教育平臺(tái)比如Zaption，Educanon等。但對(duì)于國(guó)內(nèi)用戶(hù)來(lái)說(shuō)，一方面是難以去使用其中的教學(xué)內(nèi)容，包括網(wǎng)絡(luò)以及教材的問(wèn)題，另一方面里面的一些交互形式并不適合于國(guó)內(nèi)的國(guó)情。

針對(duì)這些問(wèn)題，論文設(shè)計(jì)和開(kāi)發(fā)出一個(gè)Web端在線交互視頻的系統(tǒng)。系統(tǒng)將包括Web端交互視頻編輯器，Web端交互系統(tǒng)播放器，教育資源打印模塊，交互行為數(shù)據(jù)可視化模塊，旨在探索新的開(kāi)源交互視頻系統(tǒng)，探索前沿的交互視頻技術(shù)及應(yīng)用。

2 系統(tǒng)設(shè)計(jì)

功能模塊是系統(tǒng)的核心，論文設(shè)計(jì)的功能主要包括：1）學(xué)習(xí)監(jiān)控。系統(tǒng)對(duì)每個(gè)學(xué)生的學(xué)習(xí)行為和學(xué)習(xí)進(jìn)度進(jìn)行督促，為以后對(duì)于每個(gè)學(xué)生的各自進(jìn)度確定比較針對(duì)性的學(xué)習(xí)計(jì)劃。具體而言，系統(tǒng)在線教育視頻中插入交互式的模塊和一些試題，利用該形式，系統(tǒng)可以規(guī)定讓學(xué)習(xí)者必須學(xué)完當(dāng)前的模塊才能進(jìn)行下一模塊的學(xué)習(xí);2）學(xué)習(xí)交流。系統(tǒng)擬在視頻中嵌入即時(shí)性的互動(dòng)交流模塊，例如彈幕，論文可以在一些特定的時(shí)間段進(jìn)行信息文本的顯示，可以由學(xué)習(xí)者發(fā)布自身對(duì)于某一知識(shí)點(diǎn)的理解，也可以由教學(xué)者發(fā)布知識(shí)點(diǎn)講解的信息;3）學(xué)習(xí)效果反饋。系統(tǒng)對(duì)于學(xué)生在在線教育平臺(tái)或者是觀看在線教育視頻的行為事件進(jìn)行數(shù)據(jù)的采集和分析，這些即時(shí)反饋的信息擁有很高的實(shí)時(shí)性和準(zhǔn)確性。圍繞這些功能，系統(tǒng)設(shè)計(jì)模塊主要有如下幾個(gè)方面。

2.1 播放器模塊

系統(tǒng)播放器的功能主要基于HTML和JAVASCRIPT實(shí)現(xiàn)，具體設(shè)計(jì)的功能有：1） 視頻進(jìn)度控制功能。基本的視頻播放器需要具有對(duì)視頻播放暫?？刂频陌粹o，另外還要有能夠自由調(diào)節(jié)視頻進(jìn)度的進(jìn)度條，讓學(xué)習(xí)者可以自由定位到想要學(xué)習(xí)的時(shí)間段進(jìn)行學(xué)習(xí);2）全屏功能。全屏功能使學(xué)習(xí)者能夠?qū)Ｐ闹轮镜孛鎸?duì)在線教學(xué)視頻以及其中的交互元素，達(dá)到較好的沉浸式體驗(yàn)，提升學(xué)習(xí)者的學(xué)習(xí)效果;3）時(shí)間監(jiān)聽(tīng)功能。實(shí)現(xiàn)對(duì)于時(shí)間點(diǎn)的監(jiān)聽(tīng)，可以在某一些特殊的時(shí)間點(diǎn)上進(jìn)行斷點(diǎn)，并且在當(dāng)前特殊事件點(diǎn)進(jìn)行交互式模塊的操作。

2.2 交互模塊

通過(guò)在在線教育視頻中嵌入交互式功能模塊，可以有效地提高用戶(hù)對(duì)于教育視頻內(nèi)容的滿(mǎn)意度，達(dá)成好的學(xué)習(xí)效果，體驗(yàn)好的學(xué)習(xí)過(guò)程。設(shè)計(jì)的交互主要基于如下形式：1）斷點(diǎn)型交互組件。該組件要求學(xué)習(xí)者主動(dòng)去進(jìn)行回答或者操作才能夠進(jìn)行下一步觀看的動(dòng)作;2）連續(xù)型交互組件。該組件可以作為輔助視頻或者在一段時(shí)間內(nèi)顯示彈窗，并且不會(huì)中斷視頻的進(jìn)度;3）觸發(fā)型交互組件。該組件是指在在線視頻播放階段并不會(huì)主動(dòng)出現(xiàn)，吸引學(xué)習(xí)者注意力的組件類(lèi)型。例如視頻內(nèi)容的導(dǎo)航模塊，便于學(xué)習(xí)者進(jìn)行回顧或快速跳躍學(xué)習(xí)。

2.3 數(shù)據(jù)可視化模塊

數(shù)據(jù)可視化是指借助圖形化，圖像化的工具，將后臺(tái)的數(shù)據(jù)以更清晰直接的方式展現(xiàn)給用戶(hù)觀看，在線視頻交互行為的數(shù)據(jù)可視化，主要實(shí)現(xiàn)以下幾點(diǎn)優(yōu)勢(shì)：1）即時(shí)性反映。學(xué)習(xí)者每一次在在線視頻中進(jìn)行的交互行為，都會(huì)從前端傳遞至后臺(tái)，改變后臺(tái)的數(shù)據(jù)，通過(guò)前端UI和后端數(shù)據(jù)的雙向綁定，即時(shí)性地反映到前端界面上;2）全局性展示。數(shù)據(jù)可視化其中一個(gè)優(yōu)勢(shì)能夠?qū)⒋罅康臄?shù)據(jù)匯總并集中于一個(gè)圖表或圖像上，使得系統(tǒng)能對(duì)學(xué)習(xí)者的整體情況進(jìn)行把握，形成全面的學(xué)習(xí)者學(xué)習(xí)行為畫(huà)像。

2.4? 彈幕展示模塊

在在線教育平臺(tái)中，通過(guò)彈幕模塊的嵌入，可以緩解在線學(xué)習(xí)者臨場(chǎng)感不強(qiáng)的問(wèn)題，有效解決在線學(xué)習(xí)缺少師生交流，生生交流的缺點(diǎn)。同時(shí)能夠激發(fā)學(xué)習(xí)者參與討論的積極程度。論文需要實(shí)現(xiàn)的功能有：1）彈幕顯示功能：即在在線教育視頻前呈現(xiàn)彈幕;2）彈幕發(fā)送功能：用戶(hù)可以通過(guò)彈幕的發(fā)送提出自己的內(nèi)容見(jiàn)解;3）彈幕開(kāi)關(guān)功能：用戶(hù)可以自由選擇彈幕的顯示和關(guān)閉，創(chuàng)造最適合自己的在線學(xué)習(xí)環(huán)境。

3 系統(tǒng)實(shí)現(xiàn)

系統(tǒng)使用的是基于WEB的Vue框架來(lái)開(kāi)發(fā)論文的前端項(xiàng)目，在開(kāi)發(fā)的過(guò)程中，系統(tǒng)分別使用了Axios來(lái)實(shí)現(xiàn)后端請(qǐng)求框架，Danmaku.js實(shí)現(xiàn)彈幕模塊功能，Sass實(shí)現(xiàn)界面CSS功能。在后端框架的選擇上，系統(tǒng)采用node.js作為后臺(tái)開(kāi)發(fā)語(yǔ)言，并選擇輕量級(jí)的express作為框架。由于在本地進(jìn)行開(kāi)發(fā)的時(shí)候涉及服務(wù)器同源的問(wèn)題，所以需要在服務(wù)器設(shè)置中進(jìn)行跨域允許的操作。

針對(duì)功能需求列表，系統(tǒng)實(shí)現(xiàn)的功能效果圖如圖1所示。

4 總結(jié)

論文完成了視頻交互技術(shù)在在線平臺(tái)中的應(yīng)用，成功實(shí)現(xiàn)了Web可交互視頻的播放器和編輯器，同時(shí)也完成了其余的有利于提升在線教育質(zhì)量的功能。

參考文獻(xiàn)：

[1]? 管佳， 李奇濤. 中國(guó)在線教育發(fā)展現(xiàn)狀、趨勢(shì)及經(jīng)驗(yàn)借鑒[J]. 中國(guó)電化教育， 2014（8）：62-66.

[2]? 謝寒梅. 在線教育情境下視頻的交互模式研究[D]. 北京郵電大學(xué)，2018.

[3]? 吳子朝. 試論交互視頻技術(shù)在在線教育中的應(yīng)用[J]. 科教導(dǎo)刊（電子版），2018（4）：84-85.

【通聯(lián)編輯：王力】