基于HTML5跨平臺(tái)微課視頻系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

謝淑麗，　徐鎮(zhèn)輝

(漳州職業(yè)技術(shù)學(xué)院 計(jì)算機(jī)工程系， 福建 漳州 363000)

?

基于HTML5跨平臺(tái)微課視頻系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

謝淑麗，徐鎮(zhèn)輝

(漳州職業(yè)技術(shù)學(xué)院 計(jì)算機(jī)工程系， 福建 漳州 363000)

運(yùn)用HTML5新技術(shù)和B/S三層體系架構(gòu)，設(shè)計(jì)一個(gè)適合多終端和移動(dòng)學(xué)習(xí)的微課視頻系統(tǒng)，實(shí)現(xiàn)微課視頻的錄制、上傳、轉(zhuǎn)碼和跨平臺(tái)在線點(diǎn)播等功能，能較好地滿足人們碎片化學(xué)習(xí)要求，有利于微課教學(xué)的推廣，并為移動(dòng)學(xué)習(xí)平臺(tái)的構(gòu)建提供良好的借鑒作用。

HTML5；CSS3；微課；移動(dòng)終端；跨平臺(tái)

微課作為一種新型的學(xué)習(xí)資源，已受到人們廣泛關(guān)注，隨著智能手機(jī)、IPad等移動(dòng)終端設(shè)備的普及以及4G網(wǎng)絡(luò)、WiFi無線網(wǎng)絡(luò)的逐步覆蓋，以微課、慕課(Massive Open Online Courses，MOOC)等為代表的在線課程學(xué)習(xí)正在被廣泛接受，人們可以隨時(shí)隨地進(jìn)行碎片化學(xué)習(xí)。同時(shí)，利用微課教學(xué)和在線學(xué)習(xí)，推行“翻轉(zhuǎn)課堂”教學(xué)模式，使學(xué)生成為課堂的主體，把傳統(tǒng)的“教學(xué)”模式轉(zhuǎn)變成新型的“學(xué)教”模式，能夠有效地提高教學(xué)效果[1]。因此，設(shè)計(jì)開發(fā)一個(gè)適合移動(dòng)學(xué)習(xí)的微課視頻系統(tǒng)，方便教學(xué)者錄制、上傳微課視頻和學(xué)習(xí)者在線點(diǎn)播學(xué)習(xí)，具有重要意義。

1　微課視頻系統(tǒng)的架構(gòu)設(shè)計(jì)

該微課視頻系統(tǒng)采用B/S“瘦”客戶端“胖”服務(wù)器的體系結(jié)構(gòu)，按照瀏覽器層、中間層、數(shù)據(jù)層等進(jìn)行分層設(shè)計(jì)，如圖1所示。

圖1　微課視頻系統(tǒng)架構(gòu)

用戶在客戶端可以通過PC機(jī)、手機(jī)、平板電腦等終端設(shè)備上的瀏覽器訪問中間層Web服務(wù)器；Web服務(wù)器接收用戶的交互請(qǐng)求后，根據(jù)請(qǐng)求發(fā)送給同屬于中間層的各應(yīng)用服務(wù)器進(jìn)行處理；微課錄制轉(zhuǎn)碼服務(wù)器、流媒體服務(wù)器、管理服務(wù)器等應(yīng)用服務(wù)器接收到指令后，按指令要求實(shí)現(xiàn)如微課視頻的錄制、上傳、轉(zhuǎn)碼、分發(fā)、點(diǎn)播、評(píng)論等業(yè)務(wù)功能，并對(duì)數(shù)據(jù)層傳輸過來的數(shù)據(jù)進(jìn)行封裝，把結(jié)果整合后反饋到Web服務(wù)器的前臺(tái)網(wǎng)站進(jìn)行顯示；數(shù)據(jù)層主要根據(jù)用戶的請(qǐng)求對(duì)存放在數(shù)據(jù)庫服務(wù)器中的數(shù)據(jù)信息如用戶信息、微課視頻資源等進(jìn)行訪問和操縱，為中間層提供對(duì)應(yīng)的數(shù)據(jù)。

2　服務(wù)器端主要功能的設(shè)計(jì)與實(shí)現(xiàn)

服務(wù)器端的功能有：微課錄制、轉(zhuǎn)碼服務(wù)器是本微課視頻系統(tǒng)中最主要的服務(wù)器，可對(duì)教師上課講解或操作演示的過程進(jìn)行實(shí)時(shí)錄制，實(shí)現(xiàn)同步采集編輯功能，并提供微課視頻的上傳、轉(zhuǎn)碼等功能；管理服務(wù)器提供給管理員對(duì)用戶的注冊(cè)和評(píng)論等信息進(jìn)行管理，還對(duì)視頻信息進(jìn)行審核維護(hù)等管理；流媒體服務(wù)器負(fù)責(zé)把微課視頻的點(diǎn)播功能推送至Web服務(wù)器的前端頁面顯示；Web服務(wù)器主要提供前臺(tái)網(wǎng)站信息的瀏覽服務(wù)，用來接收用戶請(qǐng)求，并返回響應(yīng)結(jié)果。有關(guān)微課視頻的錄制、上傳、轉(zhuǎn)碼等核心功能的實(shí)現(xiàn)方法如下。

2.1微課視頻的錄制與編輯

錄制、轉(zhuǎn)碼服務(wù)器通過終端設(shè)備和網(wǎng)絡(luò)，可以對(duì)教師上課講解或操作演示的過程進(jìn)行實(shí)時(shí)錄制，實(shí)現(xiàn)同步采集和編輯功能。由于微課“短、小、精、悍”的特點(diǎn)，以及為了提高微課教學(xué)效果，在微課錄制之前，需要教師做好教學(xué)設(shè)計(jì)，準(zhǔn)備好需要用到的ppt課件、圖片、音視頻等素材，寫好拍攝的腳本，對(duì)每一段教學(xué)內(nèi)容的展現(xiàn)形式、需要用到的配套資源、所耗費(fèi)的時(shí)間等都具體標(biāo)注出來，以便于后期加工制作。Camtasia Studio是微課目前常用的編輯軟件之一。它是制作錄制屏幕、視頻編輯和演示的絕佳工具，其內(nèi)置的Recorder可以靈活地錄制屏幕，支持聲音和攝像頭同步，對(duì)錄制后的視頻片段還具有一定編輯功能。為了方便制作，用戶可以通過調(diào)用裝在該服務(wù)器上的軟件程序?qū)⑹孪蠕浿频幕蛲讲杉降奈⒄n視頻片段進(jìn)行編輯，以便后續(xù)處理，也可以選擇在自己的PC機(jī)上安裝該軟件進(jìn)行屏幕錄制與編輯后上傳到該服務(wù)器。如圖2所示，根據(jù)需要可用Camtasia Studio工具軟件添加標(biāo)題、旁白、標(biāo)注等各種輔助信息，設(shè)置畫中畫、字幕、轉(zhuǎn)場等特效增強(qiáng)視覺效果，文件編輯完成后可輸出為mp4、wmv、avi等常規(guī)的視頻文件格式，其中mp4格式能較好支持HTML5視頻播放，節(jié)省后期的轉(zhuǎn)碼過程。

圖2　使用Camtasia Studio錄制編輯微課

2.2微課視頻的上傳

在用戶端錄制編輯好的微課視頻可上傳到服務(wù)器，用戶上傳微課視頻的流程如圖3所示。

圖3　微課視頻上傳流程圖

本系統(tǒng)支持多文件批量上傳和文件過濾功能，上傳時(shí)還可設(shè)置顯示進(jìn)度信息和傳輸狀態(tài)。利用HTML5在表單頁面中創(chuàng)建一個(gè)input類型的file對(duì)象，通過multiple、accept等屬性設(shè)置，實(shí)現(xiàn)用戶在上傳對(duì)話框中進(jìn)行多個(gè)文件選擇和文件類型的過濾，主要代碼如下：

用戶提交表單后，系統(tǒng)將會(huì)調(diào)用FileSelectHandler()函數(shù)，該函數(shù)使用循環(huán)語句先調(diào)用ParseFile()函數(shù)來獲取文件名稱、文件類型、文件大小等的常規(guī)信息并顯示，再調(diào)用UploadFile()函數(shù)來實(shí)現(xiàn)文件上傳，以此來依次處理批量的每個(gè)文件。其中ParseFile()函數(shù)還可用HTML5新增的FileReader接口的readAsDataURL()方法讀取視頻的URL信息；上傳函數(shù)UploadFile()使用XMLHttpRequest對(duì)象和監(jiān)聽Progress事件，實(shí)現(xiàn)將文件以異步傳輸方式上傳到服務(wù)器中，并創(chuàng)建一個(gè)進(jìn)度條顯示上傳情況。在HTML5標(biāo)準(zhǔn)中，賦予XMLHttpRequest對(duì)象新的特性，利用XMLHttpRequest可以實(shí)現(xiàn)異步傳輸。進(jìn)度事件Progress Events事件提供了total、loaded、lengthComputable等屬性，可以很方便地監(jiān)聽上傳文件大小等進(jìn)度信息。上傳結(jié)果如圖4所示。

圖4　視頻上傳結(jié)果

文件上傳到服務(wù)器后，如果要把文件保存到服務(wù)器指定的目錄中，則要在服務(wù)器端用ASP.NET等后臺(tái)技術(shù)解碼并存儲(chǔ)上傳的文件流。

2.3微課視頻的轉(zhuǎn)碼

系統(tǒng)直接錄制的視頻可在服務(wù)器端利用FFMPEG進(jìn)行自動(dòng)轉(zhuǎn)碼，F(xiàn)FMPEG具有強(qiáng)大的音視頻轉(zhuǎn)碼功能，它是一款開源的計(jì)算機(jī)程序，可以進(jìn)行二次開發(fā)，將多種視頻格式轉(zhuǎn)碼成HTML5 video標(biāo)簽可播放的ogv、webm、mp4等高清的視頻格式，方便用戶進(jìn)行跨平臺(tái)的多媒體播放。利用FFMPEG進(jìn)行轉(zhuǎn)碼，要先將FFMPEG編譯后的可執(zhí)行文件和動(dòng)態(tài)鏈接庫放到一個(gè)目錄中，然后使用JAVA后臺(tái)調(diào)用FFMPEG程序，視頻轉(zhuǎn)碼主要命令如下：

(1)轉(zhuǎn)碼成ogv(Theora/Vorbis)格式

Ffmpeg -i sample1.avi -vcodec libtheora -acodec libvorbis -f ogv -g 30 -s 320x180 sample1.ogv

(2)轉(zhuǎn)碼成webm(VP8/Vorbis)格式

Ffmpeg -i sample1.avi -vcodec libvpx -acodec libvorbis -f webm -g 30 -s 320x180 sample1.webm

(3)轉(zhuǎn)碼成mp4(H.264/ACC)格式

Ffmpeg -i sample1.avi -vcodec 1ibx264 -vpre slow -vpre baseline -g 30 -s 320x180 sample1.mp4

3　Web前端主要功能的設(shè)計(jì)與實(shí)現(xiàn)

系統(tǒng)Web前端主要完成微課視頻的播放功能，并提供用戶導(dǎo)航、微課視頻搜索和課程介紹等方面的相關(guān)服務(wù)。編輯轉(zhuǎn)碼處理過的服務(wù)器視頻數(shù)據(jù)將被轉(zhuǎn)化成xml格式傳遞到客戶端，客戶端可通過解析xml數(shù)據(jù)進(jìn)行視頻播放。在HTML5出現(xiàn)之前，大多數(shù)視頻是通過插件顯示，本系統(tǒng)則采用HTML5的視頻video標(biāo)簽進(jìn)行實(shí)現(xiàn)，不依賴于插件。在HTML5中，常用的視頻容器格式有mpeg-4、ogg和webm，為了覆蓋所有支持HTML5的瀏覽器，播放多種視頻格式，可在Video標(biāo)簽中添加多個(gè)source元素，瀏覽器將按source元素的順序檢測其指定的視頻是否能夠正常播放，找到可播放的視頻文件后，隨后的其他元素將被忽略。Video標(biāo)簽代碼如下：

4　跨平臺(tái)瀏覽功能的實(shí)現(xiàn)

為滿足不同客戶端設(shè)備的瀏覽要求，本系統(tǒng)采用自適應(yīng)的網(wǎng)頁設(shè)計(jì)方法，即先開發(fā)PC版的網(wǎng)站頁面，再通過viewport虛擬窗口技術(shù)和CSS3(Cascading StyleSheet 3.0)中新增的Media Queries樣式模塊，使PC版頁面被其他移動(dòng)平臺(tái)的瀏覽器訪問時(shí)，能夠根據(jù)移動(dòng)設(shè)備的屏幕大小進(jìn)行響應(yīng)式適配，實(shí)現(xiàn)跨平臺(tái)的頁面瀏覽。實(shí)現(xiàn)viewport虛擬窗口，需要在網(wǎng)頁頭部加上meta標(biāo)簽，并在meta標(biāo)簽中定義viewport，設(shè)定各屬性值以調(diào)整窗口的大小和各種縮放比例，從而適應(yīng)各種移動(dòng)設(shè)備的屏幕。meta標(biāo)簽代碼如下：

代碼中設(shè)置虛擬窗口viewport寬度為設(shè)備的出廠屏幕寬度device-width，初始縮放比例為1，同時(shí)允許用戶進(jìn)行手動(dòng)縮放，縮放最小比例為0.5，最大比例為2.0。

在Media Queries樣式模塊中，可以針對(duì)不同設(shè)備屏幕寬度，在CSS文件中預(yù)先定義適用的樣式代碼。當(dāng)用戶訪問網(wǎng)頁時(shí)，服務(wù)器接收到客戶端設(shè)備屏幕的尺寸信息，服務(wù)器判斷處理后，選擇合適的Media Queries樣式代碼并應(yīng)用在HTML上，生成最終的頁面再反饋給客戶端，從而滿足不同客戶端設(shè)備的瀏覽要求。根據(jù)PC機(jī)、平板電腦和手機(jī)3種常用的客戶端設(shè)備，系統(tǒng)創(chuàng)建了對(duì)應(yīng)的Media Queries樣式代碼，其訪問流程如圖5所示。

圖5　Media Queries樣式下網(wǎng)頁訪問流程

針對(duì)3種不同樣式的頁面布局，本系統(tǒng)通過靈活定義頁面上header、content、sidebar的3個(gè)組成部分進(jìn)行實(shí)現(xiàn)，3種不同樣式的頁面布局如圖6所示。

首先，用一個(gè)elementpack容器將header、content、sidebar的3個(gè)組成部分封裝在一起，代碼如下：

對(duì)于PC設(shè)備樣式，也是系統(tǒng)默認(rèn)的初始樣式，可以設(shè)置elementpack容器寬度為980px，header高度為160px，content容器寬度為600px且向左浮動(dòng)，邊欄sidebar寬度為280px并向右浮動(dòng)，如圖6(a)所示；對(duì)于平板電腦設(shè)備樣式，也就是當(dāng)屏幕寬度小于980px時(shí)，可以采用流動(dòng)布局方式，頁面內(nèi)容設(shè)置elementpack寬占比為95%，content寬占比為60%，sidebar寬占比為30%，如圖6(b)所示；對(duì)于手機(jī)設(shè)備樣式，也就是當(dāng)屏幕寬度小于480px時(shí)，可以采用一列布局方式，頁面內(nèi)容設(shè)置header寬度為自動(dòng)auto，content寬度為自動(dòng)并取消浮動(dòng)，sidebar寬占比為100%并取消浮動(dòng)，如圖6(c)所示。

(a) PC設(shè)備樣式　　　　　(b) 平板電腦設(shè)備樣式　　　　　(c) 手機(jī)設(shè)備樣式圖6　跨平臺(tái)自適應(yīng)頁面布局

5　小　結(jié)

隨著移動(dòng)智能終端設(shè)備的日益普及和移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，利用微課等視頻資源進(jìn)行碎片化學(xué)習(xí)，已成為人們一種新的學(xué)習(xí)方式。利用HTML5全新技術(shù)構(gòu)建適合移動(dòng)學(xué)習(xí)的微課視頻系統(tǒng)，實(shí)現(xiàn)視頻資源的錄制、編輯、上傳、轉(zhuǎn)碼和Web前端播放等功能，并運(yùn)用viewport虛擬窗口技術(shù)和CSS3中的Media Queries樣式模塊，能快捷、有效地實(shí)現(xiàn)跨平臺(tái)的移動(dòng)瀏覽，為移動(dòng)學(xué)習(xí)的推廣，以及平臺(tái)構(gòu)建提供良好的借鑒作用。系統(tǒng)現(xiàn)有功能基本達(dá)到預(yù)期要求，但在微課視頻自動(dòng)編輯、轉(zhuǎn)碼等方面仍需進(jìn)一步改進(jìn)，如FFMPEG程序在視頻轉(zhuǎn)碼過程中，有時(shí)會(huì)出現(xiàn)wmv、rmvb格式無法解析的現(xiàn)象，而只能借助其他軟件(如格式工廠)先轉(zhuǎn)換成FFMPEG能解析的格式之后再轉(zhuǎn)碼，增加了用戶后期制作的工作量，F(xiàn)FMPEG視頻解析程序的功能有待進(jìn)一步完善；此外，頁面響應(yīng)式設(shè)計(jì)樣式算法還要優(yōu)化，以期更加精確地控制各種設(shè)備屏幕，達(dá)到更好的播放效果。

[1]倪彤.職業(yè)院?！拔⒄n”開發(fā)與應(yīng)用的熱點(diǎn)問題[J].中國培訓(xùn),2015(17) :34.

[2]張文.基于HTML5的視頻播控和客戶服務(wù)系統(tǒng)[D].西安:西安電子科技大學(xué),2014.

[3]趙淑漫.FFMPEG轉(zhuǎn)碼技術(shù)在HTML5視頻系統(tǒng)中的研究與應(yīng)用[D].上海:東華大學(xué),2014.

[4]張永生.基于HTML5的跨平臺(tái)體育視頻網(wǎng)站開發(fā)[D].上海:東華大學(xué),2015.

[5]季聿階.基于HTML5的多媒體自動(dòng)播放系統(tǒng)的研究與設(shè)計(jì)[D].上海:上海交通大學(xué),2014.

[6]潘琦華,朱亞興,馬廣智.基于微課的移動(dòng)學(xué)習(xí)平臺(tái)建設(shè)及對(duì)策研究[J].天津職業(yè)大學(xué)學(xué)報(bào),2015,24(5):76-80.

[7]徐鎮(zhèn)輝,謝淑麗.教育視頻分享網(wǎng)站的規(guī)劃及版權(quán)保護(hù)措施研究[J].通化師范學(xué)院學(xué)報(bào),2013,34(5):24-27.

[8]徐鎮(zhèn)輝.基于HTML5的視頻網(wǎng)站設(shè)計(jì)與Web前端EPG系統(tǒng)實(shí)現(xiàn)[J].漳州職業(yè)技術(shù)學(xué)院學(xué)報(bào),2013,15(2):1-6.

[9]呂志鋼.支持移動(dòng)學(xué)習(xí)的教學(xué)視頻點(diǎn)播系統(tǒng)設(shè)計(jì)[J].電子世界,2014(5):134-135.

[10]魏曉玲.微課視頻點(diǎn)播系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].開封教育學(xué)院學(xué)報(bào),2014,34(4):141-142.

[11]趙振方,魏紅芳,趙林強(qiáng).HTML5+CSS3網(wǎng)站布局應(yīng)用教程[M].北京:北京希望電子出版社,2012.

[12]唐俊開.HTML5移動(dòng)Web開發(fā)指南[M].北京:電子工業(yè)出版社,2012.

[責(zé)任編輯：張存鳳]

Design and implementation of cross-platform microlecture video system based on HTML

XIE Shu-li,XU Zhen-hui

(Zhangzhou Institute of Technology, Department of Computer Engineering,Zhangzhou 363000, China)

As a new form of teaching resources, microlecture has attracted wide attention. The microlecture video system is based on the latest HTML5 technology and B/S three-tier architecture.The system is suitable for multi-termina and mobile learning. It realizes that the recording, uploading, transcoding and cross-platform online demanding and other functions of the microlecture video. It better meets people’s fragmented learning requirements. And it is conducive to the promotion of microlecture and provides a good reference for building a mobile learning platform.

HTML5;CSS3;microlecture;mobile terminal;cross-platform

1673-2944(2016)05-0063-06

2016-05-12

2016-07-13

福建省中青年教師教育科研項(xiàng)目(JB13296)

謝淑麗(1978—)，女，福建省龍巖市人，漳州職業(yè)技術(shù)學(xué)院副教授，高級(jí)工程師，碩士，主要研究方向?yàn)橛?jì)算機(jī)多媒體技術(shù)、圖形圖像處理與模式識(shí)別。

TP311

A