基于HTML5的視頻字幕控制和數(shù)學(xué)在線互動平臺的實現(xiàn)

◆王玉龍 周群

作者：王玉龍，國防科技大學(xué)電視臺，研究方向為教育技術(shù)（410073）；周群，湖南涉外經(jīng)濟(jì)學(xué)院信息科學(xué)與工程學(xué)院，研究方向為網(wǎng)絡(luò)與多媒體技術(shù)（410205）。

1 引言

隨著現(xiàn)代信息技術(shù)的發(fā)展，網(wǎng)絡(luò)技術(shù)在教育中的應(yīng)用日益廣泛與深入。網(wǎng)絡(luò)教育、網(wǎng)絡(luò)課程、在線教學(xué)與學(xué)習(xí)環(huán)境的設(shè)計成為當(dāng)前國際教育界的熱門話題，在一定程度上有效地推動了網(wǎng)絡(luò)教學(xué)的發(fā)展[1-2]。數(shù)學(xué)在線課程作為一門相對特殊的網(wǎng)絡(luò)課程，既有一般網(wǎng)絡(luò)課程建設(shè)的共同特點，也具有自己獨特的特征。比如，由于數(shù)學(xué)思想、概念、定理與結(jié)論等之間的邏輯性與整體性，不能像一般MOOC課程簡單地對教學(xué)視頻進(jìn)行片段化處理，并且學(xué)習(xí)過程可能需要有更多的重復(fù)性與可再現(xiàn)性，因此要求視頻的回放控制具有更大的靈活性；數(shù)學(xué)素材的制作與交流對話平臺的構(gòu)建具有太多的數(shù)學(xué)化元素，因此在網(wǎng)絡(luò)教學(xué)平臺構(gòu)建和選擇的表現(xiàn)形式上更復(fù)雜。因此，如何借助最新的網(wǎng)絡(luò)技術(shù)，優(yōu)化與設(shè)計數(shù)學(xué)網(wǎng)絡(luò)教學(xué)與學(xué)習(xí)環(huán)境，搭建方便、快捷的互動對話平臺，真正發(fā)揮出網(wǎng)絡(luò)教學(xué)平臺的優(yōu)勢，成為廣大數(shù)學(xué)教育工作者及平臺設(shè)計人員普遍關(guān)注和不斷探索的課題。

本文借助HTML5、MathML、Mathtype和最新的IE、Firefox網(wǎng)頁瀏覽器等技術(shù)與工具，給出在線視頻添加字幕、由字幕實現(xiàn)視頻播放位置精準(zhǔn)控制的實現(xiàn)方法，提出數(shù)學(xué)化的對話平臺的構(gòu)建模式與方法。

2 借助HTML5實現(xiàn)字幕導(dǎo)航控制視頻播放位置

HTML（超文本標(biāo)記語言）是網(wǎng)絡(luò)應(yīng)用中使用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。為了適應(yīng)網(wǎng)絡(luò)的快速發(fā)展和推動Web應(yīng)用的標(biāo)準(zhǔn)化，2012年12月，萬維網(wǎng)聯(lián)盟（W3C）正式宣布了宣傳為“開放的Web網(wǎng)絡(luò)平臺的奠基石”的HTML5規(guī)范定稿，并在2014年4月發(fā)布了最新的修訂版本[3]。在基于HTML5的Web應(yīng)用平臺上，視頻、音頻、圖像、圖形、動畫以及交互式文檔都被標(biāo)準(zhǔn)化，摒棄了原有的私有封閉技術(shù)，改變了“多版本開發(fā)、多終端適配”的傳統(tǒng)開發(fā)模式，使得互聯(lián)網(wǎng)/移動互聯(lián)網(wǎng)應(yīng)用的“一次開發(fā)、跨平臺/跨終端運行”成為可能[4]，并且已經(jīng)得到很多跨平臺的瀏覽器支持。

不管是一般的課程教學(xué)網(wǎng)站，還是目前熱門的MOOC課程學(xué)習(xí)平臺，教學(xué)視頻是網(wǎng)絡(luò)教學(xué)的主要數(shù)字資源。數(shù)學(xué)課程不同于其他文化課程，在授課視頻中必定會包含大量的數(shù)學(xué)公式與推導(dǎo)、分析過程，同一視頻片段中的內(nèi)容相關(guān)性較高，學(xué)習(xí)者在聽課過程中并不能一次性地體會與理解，經(jīng)常需要非常精準(zhǔn)地跳到不同位置重復(fù)授課內(nèi)容；或者通過字幕了解后續(xù)內(nèi)容后，跳過已經(jīng)理解和掌握的內(nèi)容，轉(zhuǎn)到自己感興趣的內(nèi)容。要實現(xiàn)這些功能，就需要有非常好的精確定位導(dǎo)航控制。

在網(wǎng)絡(luò)上實現(xiàn)在線視頻的精準(zhǔn)控制具有一定難度，在Internet Explorer 10.0（IE10.0）及以上版本環(huán)境中，借助于HTML5技術(shù)，不僅可以實現(xiàn)給視頻添加字幕，而且可以通過字幕實現(xiàn)對視頻播放位置的精準(zhǔn)導(dǎo)航控制。如圖1所示，右側(cè)列出整個視頻的所有字幕，并給原來沒有字幕的視頻添加了字幕；單擊右側(cè)字幕列表項，視頻會自動跳轉(zhuǎn)到字幕出現(xiàn)的時間點并開始播放。

圖1 IE10+HTML5實現(xiàn)字幕對視頻播放位置的精確控制

圖1的播放與控制效果需要有IE10.0以上瀏覽器的支持，并通過HTML5的視頻播放與控制功能來實現(xiàn)。字幕內(nèi)容保存為專門的軌道文件，如Web視頻文本軌道文件（WebVTT）或文本時間標(biāo)記語言文件（TTML）。其中WebVTT（后綴名為vtt）的文件結(jié)構(gòu)相對簡單，第一行為文本“WEBVTT”，后面空一行，接著是字幕出現(xiàn)的時間段，另起一行輸入字幕內(nèi)容；如果輸入多行字幕，則可以實現(xiàn)雙語或者多語言字幕功能，各不同時間點的字幕之間空行輸入。

圖2給出的字幕示例文件內(nèi)容包含兩段字幕，并且第一段字幕在視頻上顯示為雙語字幕，上面為中文，下面為對應(yīng)的英文字幕。將字幕文件（cn_track.vtt）與網(wǎng)頁文件（HTML文件）、視頻文件（movie.mp4）保存在同一文件夾下，通過如下代碼即可實現(xiàn)瀏覽器中視頻的自動循環(huán)播放，并附帶視頻控制條和附加顯示字幕內(nèi)容：

值得注意的是，如果使用“記事本”編輯字幕文件和網(wǎng)頁文件，在保存時最好設(shè)置其“編碼”為“UTF-8”，并將網(wǎng)頁文件的字符集（charset）設(shè)置為“UTF-8”，否則中文字幕可能顯示為亂碼。

圖2 WebVTT字幕文件內(nèi)容結(jié)構(gòu)

上面的操作還只是為視頻添加字幕，字幕不會在視頻畫面外顯示，同時也無法直接實現(xiàn)通過單擊字幕控制視頻播放位置的功能，具體的實現(xiàn)方法可以參考微軟的瀏覽器開發(fā)中心網(wǎng)站[5]。在文獻(xiàn)[5]的頁面中，只要將其中的“獲取所有對白”（Get all the cues）標(biāo)題下的示例代碼保存為HTML文件，然后修改視頻與字幕文件為自己所需的內(nèi)容，就可以直接得到字幕控制視頻精準(zhǔn)導(dǎo)航的效果，參考其他鏈接內(nèi)容可以實現(xiàn)更靈活的控制功能。圖1的界面是經(jīng)過字幕列表位置調(diào)整以后的效果。

3 借助MathML和MathType構(gòu)建數(shù)學(xué)互動平臺

數(shù)學(xué)公式在網(wǎng)頁上顯示的方法主要有三種：圖片顯示，數(shù)學(xué)標(biāo)記語言（MathML）和文檔排版系統(tǒng)（LaTeX）[6]。為了讓公式顯示得清晰、完美，目前網(wǎng)絡(luò)上也提供了一些瀏覽器插件或者一些專門用于數(shù)學(xué)公式編輯、轉(zhuǎn)換和解析的工具或平臺，但是其展示效果一直不很理想；或者對開發(fā)的在線學(xué)習(xí)平臺，尤其是不能連接到互聯(lián)網(wǎng)的內(nèi)網(wǎng)數(shù)學(xué)交互平臺中，不能達(dá)到滿意的效果。

為了解決這個問題，提出使用MathML[7]（數(shù)學(xué)標(biāo)記語言）和支持該語言的火狐瀏覽器，借助HTML5技術(shù)和本機(jī)MathType數(shù)學(xué)公式輸入工具構(gòu)建數(shù)學(xué)在線交互平臺的思路與方法。圖3是交互平臺的實現(xiàn)效果，上面顯示的是數(shù)據(jù)庫中保存的包含數(shù)學(xué)公式的試題或者主題信息；中間為文本輸入窗口，用來輸入包含MathML語言的交互式文本內(nèi)容；下面是實時預(yù)覽編輯文本框中輸入內(nèi)容的最終顯示效果，以便檢驗是否符合輸入要求，單擊“保存”按鈕可以將滿意后的輸入或回復(fù)內(nèi)容存入后臺數(shù)據(jù)庫。

下面給出圖3實現(xiàn)的功能與顯示效果的具體實現(xiàn)步驟與方法。

1）頁面布局設(shè)置。創(chuàng)建一包含三行一列的表格，第一行單元格用于顯示上次通過中間文本框輸入的主題信息；第二行單元格為包含提交表單的交互式輸入文本框，文本框的HTML編碼如下：

fflt;textarea id=”textname” cols=”60” rows=”10” onkeyup=”changetext()”ffgt;fflt;/textareaffgt;

第三行單元格用于顯示包含預(yù)覽輸入文本框內(nèi)容的層對象，層對象的HTML編碼為：

圖3 網(wǎng)頁中數(shù)學(xué)公式的顯示、輸入與預(yù)覽

fflt;div id="textShow"ffgt;預(yù)覽輸入窗口fflt;/divffgt;

2）數(shù)據(jù)的讀取與保存。創(chuàng)建一包含用于保存主題信息字段表的數(shù)據(jù)庫，如ACCESS數(shù)據(jù)庫；編寫讀取最后一條記錄中該字段內(nèi)容的代碼，并將內(nèi)容顯示在第一行的單元格內(nèi)；編寫單擊“提交”按鈕用于新增數(shù)據(jù)庫表記錄、保存輸入文本框內(nèi)容的代碼。

3）實現(xiàn)包含數(shù)學(xué)公式的文本框內(nèi)容實時預(yù)覽。用JavaScript編寫文本框“onkeyup”事件調(diào)用“changetext()”的代碼：

4）輸入數(shù)學(xué)公式的MathML語言描述形式。對于普通文字可以在文本框中直接輸入，對于一般用戶而言，要用MathML語言描述數(shù)學(xué)公式相對比較困難。因此通過對MathType的適當(dāng)設(shè)置，可以通過MathType直接將輸入的公式對應(yīng)的MathML語言描述粘貼到文本框中完成輸入。打開MathType，單擊“參數(shù)”（Preferences）菜單項，選擇“剪切/復(fù)制參數(shù)設(shè)置”（Cut and Copy Preferences），打開“剪切/復(fù)制參數(shù)設(shè)置”對話框，在“MathML or Tex”列表中選擇“MathML 2.0（no namespace）”選項，單擊“確定”（OK）按鈕完成設(shè)置。這樣通過“復(fù)制”“粘貼”Mathtype公式即為公式或符號的MathML描述形式。把公式的MathML代碼粘貼到文本區(qū)域指定位置，按一下空格或者任意鍵，在下面的預(yù)覽單元格中即可看到公式的實際顯示效果。

值得注意的是，有時候粘貼的MathML代碼的第一個標(biāo)記fflt;mathffgt;中可能包含選項“display=' block' ”，這時公式會另起一行顯示；如果不希望另起一行，只要將該參數(shù)刪除即可。如果預(yù)覽效果滿意，單擊“提交”則可以將預(yù)覽窗口的內(nèi)容保存到數(shù)據(jù)庫，并在第一行中顯示出來。

4 結(jié)束語

雖然通過在線數(shù)學(xué)交互平臺可以拓廣教學(xué)與學(xué)習(xí)的時空維度，構(gòu)建師生平等的互動交流氛圍，但是與其他文化課程不同，要保證數(shù)學(xué)課程的教學(xué)質(zhì)量和學(xué)習(xí)效率，仍離不開線下的課堂教學(xué)和師生的面對面互動交流，所以數(shù)學(xué)的在線教育更多地是被看作對課堂教學(xué)與線下學(xué)習(xí)的輔助和補充。它為進(jìn)一步豐富和完善課堂教學(xué)過程，拓廣教學(xué)與學(xué)習(xí)時間和空間維度，提高教學(xué)和學(xué)習(xí)效率及質(zhì)量提供一個相對有效的途徑。

本文僅僅研究了構(gòu)建數(shù)學(xué)有效互動在線平臺的部分技術(shù)，針對構(gòu)建平臺中存在的視頻控制和輸入與顯示數(shù)學(xué)公式及符號不理想的問題，給出解決問題的方法。要想充分發(fā)揮在線平臺的功能，除了進(jìn)一步豐富平臺內(nèi)容和功能之外，還需要進(jìn)一步加強在互動平臺支撐下的教學(xué)模式與學(xué)習(xí)模式的研究，這樣才能真正實現(xiàn)搭建平臺，服務(wù)與促進(jìn)教學(xué)與學(xué)習(xí)效率與質(zhì)量提升的目標(biāo)。

[1]謝幼如,尹睿.網(wǎng)絡(luò)教學(xué)設(shè)計與評價[M].北京:北京師范大學(xué)出版社,2010.

[2]艾碧.網(wǎng)絡(luò)教育：教學(xué)與認(rèn)知發(fā)展新視角[M].丁興富,等,譯.北京:中國輕工業(yè)出版社,2003.

[3]HTML5[EB/OL].http://www.w3.org/TR/2014/CR-html5-2014 0429.

[4]陸鋼,李慧云.HTML5技術(shù)應(yīng)用現(xiàn)狀與發(fā)展趨勢研究[J].廣東通信技術(shù),2013(5):2-5.

[5]Timed text tracks[EB/OL].http://msdn.microsoft.com/en-us/library/ie/bg123962(v=vs.85).aspx.

[6]顧勤.數(shù)學(xué)公式在Web中的顯示方案[EB/OL].http://express.ruanko.com/ruanko-express_62/tech-overnight3.html.

[7]Mathematical Markup Language (MathML) Version 3.0 2nd Edition[EB/OL].http://www.w3.org/TR/2014/REC-MathML3-20140410/.