html5 在线浏览doc,基于HTML5即时在线讨论区设计.doc

基于HTML5即时在线讨论区设计

基于HTML5即时在线讨论区设计

摘要：为了保证远程教学的质量，需要有流畅的音频视频播放和实时的教学互动交流。基于HTML5的远程教学在线即时讨论区的设计，满足了这一要求。使用HTML5提供的Video标签，能实现音频视频文件的流畅播放，使用HTML5规范中定义的WebSocket协议能实现实时通信功能。用HTML5技术设计的教学网站，保证了远程学习的顺利进行。

关键词：远程教学；HTML5；Video；WebScoket；在线讨论

中图分类号：TP393 文献标识码：A 文章编号：1009-3044(2018)14-0077-02

Abstract： In order to ensure the quality of distance teaching， it is necessary to have fluent audio video playback and Interactive communication between teaching and learning in real time. Design of real-time online discussion area of distance teaching based on HTML5 has satisfied this requirement. Using the Video tag provided by HTML5 to achieve the smooth play of audio and video files， and the WebSocket protocol defined in the HTML5 specification enables real-time communication. The web site designed with HTML5 technology ensures the smooth progress of distance learning.

Key words： distance teaching； HTML5； video； WebScoket； online discussion

1 引言

随着信息技术的发展，远程教学越来越受到学习者的喜欢，这种教学方式不仅打破了传统的时空限制，而且能充分利用高质量的教育资源，让更多的人受教育，最大限度地发展教育事业，是现在也是未来的重要的教育手段。

远程教学是通过一套网络设备完成的，无形中减少了与人群的接触和交流。另外，学习者面对一个固定的机器，容易疲劳影响学习效果，于是有的人最终放弃远程学习。传统教学模式下，大家聚集在一起，很容易创造良好的学习氛围，可以互相帮助，互相讨论，互相学习，学习效果较好。远程教学系统应汲取传统教学模式的优点，设计成具有实用性、实时性和交互性，切合师生学习、交流、分享等多种需求的系统。因此，在远程教学系统中设计讨论区，能实现老师和学生即时讨论交流，及时解惑答疑，实现同学之间实时的互相讨论，提高学习兴趣，保证学习质量。

实现远程学习以及即时在线讨论，必须实现音频视频播放和信息的快速传递。HTML5提供的标签能实现播放视频，HTML5 WebScoket协议提供的全双工通信机制，可以实现快速高效的信息传递，用HTML5技术可以设计实现远程教学系统及即时在线讨论功能。

2 HTML5 WebScoket的技术原理

2.1 HTML5对音频视频的支持

2013年，HTML 5.1正式草案公布，在这个版本中，新功能不断推出，提高了新元素的互操作性。HTML5中定义的新标记，实现了视频定义和倍速播放，媒体的播放依赖W3C推出的Media-SourceExtensions(媒体源扩展，简称MSE)草案，MSE草案能够允许JavaScript生成用于播放的媒体流，浏览器端从而可以完全使用JavaScript脚本预先获取并缓冲媒体数据，不需要第三方插件支持就能播放媒体文件。另外基于HTML5技术实现的videojs-flow开源插件，作为直播框架，能够将FLV数据块逐个转码成MP4视频流和音频流供播放器播放。

2.2 WebScoket协议双向通信机制

伴随着HTML5推出的WebSocket协议，是基于TCP的一种新的网络协议，其在浏览器和服务器之间提供了一个类 TCP/IP 全双工通信方式，实现了浏览器与服务器全双工(full-duplex)通信――允许服务器主动发送信息给客户端，真正实现了Web的实时通信。

WebSocket ?f议定义了两种URL方案(URL scheme)―ws 和wss，分别用于客户端和服务器之间的非加密与加密流量。HTML5通过