周密++蒲華秀++席凌

摘要：HTML（Hyper Text Markup Language）是構(gòu)成網(wǎng)頁文檔的主要語言，在新的HTML5規(guī)范中，提供了新的元素和屬性，尤其在多媒體支持方面帶來技術(shù)變革，為以流媒體為主要形式的微課教學(xué)資源的在線設(shè)計(jì)提供技術(shù)支持。本文對HTML5 多媒體播放技術(shù)進(jìn)行了分析，研究如何將HTML5的新標(biāo)簽運(yùn)用到在線微課的WEB前端的設(shè)計(jì)與制作中。

關(guān)鍵詞：HTML5；微課；WEB；前端設(shè)計(jì)

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2016）17-0208-02

1 HTML5介紹

2012年12月17日，萬維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范完成。該規(guī)范是未來WEB應(yīng)用的基礎(chǔ)，主要由HTML、CSS等組成，是一個(gè)完整的編程規(guī)范環(huán)境。新規(guī)范彌補(bǔ)了以前版本在多媒體和頁面交互等方面的缺陷，能夠很好地滿足目前WEB開發(fā)和應(yīng)用中內(nèi)容多樣性、靈活的需求[1]。

微課是圍繞課程的知識點(diǎn)或教學(xué)環(huán)節(jié)開展的簡短、完整的教學(xué)活動通過視頻進(jìn)行記錄，以流媒體形式在線展示給學(xué)習(xí)者。基于微課的移動學(xué)習(xí)、遠(yuǎn)程學(xué)習(xí)、在線學(xué)習(xí)、“泛在學(xué)習(xí)”將會越來越普及，而微課教學(xué)資源必須借助WEB前端進(jìn)行展示。而在HTML 5以前，網(wǎng)頁中進(jìn)行教學(xué)多媒體資源的播放，必須安裝相應(yīng)的第三方插件才能播放。同時(shí)移動設(shè)備終端對第三方插件猶如flash控件的不兼容，導(dǎo)致視頻文件不能正常播放。而HMTL5新增加的標(biāo)記，實(shí)現(xiàn)了對多媒體的支持，使得瀏覽器播放視頻不受到插件的限制。本文通過對HTML5技術(shù)中新特點(diǎn)進(jìn)行分析，研究如何將其應(yīng)用于微課在線WEB前端的設(shè)計(jì)中。

2 video 標(biāo)記

在HTML5中可以直接通過新增加的

標(biāo)簽作為

2.2 track 標(biāo)記

在新的HTML5增加的標(biāo)簽中track標(biāo)簽作為video標(biāo)簽的子元素，在使用video標(biāo)簽播放視頻時(shí)可以將字幕文本（WEBtt、.srt）中的信息加載出來，顯示在視頻中提供了播放時(shí)添加字幕、標(biāo)題或章節(jié)等字幕的選擇的功能，播放時(shí)將字幕文本顯示在視頻中。它有以下5個(gè)屬性：

2.3 代碼實(shí)現(xiàn)

以上代碼實(shí)現(xiàn)了當(dāng)訪問者點(diǎn)開頁面時(shí)首先根據(jù)瀏覽器的解碼，可以選擇MP4或ogg格式的多媒體資源播放進(jìn)行直接播放。播放時(shí)默認(rèn)加載中文字幕，并且可以選擇切換為英文字幕。

3 微課WEB前端設(shè)計(jì)

基于HTML5的微課WEB前端利用以上的新標(biāo)簽可以直接播放微課教學(xué)資源，而且在課程特色的設(shè)計(jì)中與其他新標(biāo)簽和屬性結(jié)合使用，能豐富WEB前端的展示方式，增強(qiáng)WEB前端與學(xué)習(xí)者的交互性，改變傳統(tǒng)只能點(diǎn)擊觀看資源視頻的模式，并且讓代碼簡單不冗余，加載迅速，讓微課的視頻資源在線播放時(shí)變得更加流暢。同時(shí)支持以java、.net和php等平臺開發(fā)的后臺管理系統(tǒng)對WEB前端的信息內(nèi)容和資源進(jìn)行動態(tài)的管理，可以降低網(wǎng)站開發(fā)的復(fù)雜度，更好的控制進(jìn)度，降低維護(hù)成本，并且提高平臺的可擴(kuò)展性，而使得HTML5成為了學(xué)習(xí)平臺開發(fā)者在系統(tǒng)架構(gòu)時(shí)對表示層設(shè)計(jì)的首選。

4 結(jié)束語

隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，而HTML5標(biāo)準(zhǔn)仍在不斷地增加新的標(biāo)簽與屬性為基于微課資源進(jìn)行的移動學(xué)習(xí)、遠(yuǎn)程學(xué)習(xí)、在線學(xué)習(xí)、“泛在學(xué)習(xí)”模式提供更好的技術(shù)支持，讓學(xué)習(xí)變得更加豐富。

參考文獻(xiàn)：

[1]明日科技.HTML5從入門到精通[M].北京：清華大學(xué)出版社，2014.

[2]俞華鋒.基于HTML5的網(wǎng)頁設(shè)計(jì)與實(shí)現(xiàn)[期刊論文[J].科技信息，2012（29）.

[3] www.w3school.com.cn/ w3school.