周密++蒲華秀++席凌

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

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

中圖分類號：TP393 文獻標識碼：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等組成，是一個完整的編程規(guī)范環(huán)境。新規(guī)范彌補了以前版本在多媒體和頁面交互等方面的缺陷，能夠很好地滿足目前WEB開發(fā)和應(yīng)用中內(nèi)容多樣性、靈活的需求[1]。

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

2 video 標記

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

標簽作為

2.2 track 標記

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

2.3 代碼實現(xiàn)

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

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

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

4 結(jié)束語

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

參考文獻：

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

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

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