基于HTML5的視頻字幕控制和數學在線互動平臺的實現

◆王玉龍 周群

作者：王玉龍，國防科技大學電視臺，研究方向為教育技術（410073）；周群，湖南涉外經濟學院信息科學與工程學院，研究方向為網絡與多媒體技術（410205）。

1 引言

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

本文借助HTML5、MathML、Mathtype和最新的IE、Firefox網頁瀏覽器等技術與工具，給出在線視頻添加字幕、由字幕實現視頻播放位置精準控制的實現方法，提出數學化的對話平臺的構建模式與方法。

2 借助HTML5實現字幕導航控制視頻播放位置

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

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

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

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

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

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

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

圖2 WebVTT字幕文件內容結構

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

3 借助MathML和MathType構建數學互動平臺

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

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

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

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

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

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

圖3 網頁中數學公式的顯示、輸入與預覽

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

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

3）實現包含數學公式的文本框內容實時預覽。用JavaScript編寫文本框“onkeyup”事件調用“changetext()”的代碼：

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

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

4 結束語

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

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

[1]謝幼如,尹睿.網絡教學設計與評價[M].北京:北京師范大學出版社,2010.

[2]艾碧.網絡教育：教學與認知發展新視角[M].丁興富,等,譯.北京:中國輕工業出版社,2003.

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

[4]陸鋼,李慧云.HTML5技術應用現狀與發展趨勢研究[J].廣東通信技術,2013(5):2-5.

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

[6]顧勤.數學公式在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/.