基于HTML5的视频网站设计与Web前端EPG系统实现
2013-03-26徐镇辉
徐镇辉
基于HTML5的视频网站设计与Web前端EPG系统实现
徐镇辉
（漳州职业技术学院 计算机工程系，福建 漳州 363000）
HTML5是W3C制定的一个Web新标准，由它带来的前端技术变革已经对Web应用产生了巨大的影响。分析了视频分享网站的设计原则，提出基于HTML5的系统架构和功能设计，并对HTML5的技术特点，尤其对HTML5中新的页面结构元素、智能表单控件和属性、多媒体内嵌对象等新特性进行深入理解和探索，将这些新特性恰当地应用于视频分享网站的Web前端EPG系统的设计中。
HTML5；Web应用；视频分享网站；Web前端EPG系统
1 引 言
随着宽带网络的普及、硬盘空间的价格持续降低以及音视频编码技术的发展，视频分享网站在互联网上已经流行起来。国外受欢迎的视频分享网站有YouTube、Hulu等，国内规模较大的有土豆（Tudou）、优酷（Youku）、六间房（6.cn）、魔方网（Mofile）等，还随处可见小型的视频分享站点。这些都是Web2.0时代的产物，充分体现了Web2.0互动、分享、交流的核心理念。可如今Web应用即将进入HTML5的时代，特别是基于HTML5的Web App将为互联网的应用带来跨越式的发展。
2 HTML5技术简介
HTML5规范于已2012年底正式定稿，是开放Web网络平台的奠基石，包括 HTML、CSS 和 Javascript在内的一套技术的组合。它弥补了HTML4在交互、媒体和本地操作等方面的不足，支持当前多样的、复杂的Web 内容。在HTML5中，新增了许多带有语义性的标记，来加速浏览器解释页面中元素的速度；新增了许多交互体验元素，提升用户的体验度；新增了许多新的表单控件和属性，完善表单的功能；新增了对多媒体标签的支持，从此脱离插件的羁绊；除此之外，HTML5在离线浏览、本地存储、Web Socket以及Web Workers等方面也有独特之处，已经受到许多业内巨头的青睐，包括Adobe、苹果、谷歌、微软、Mozilla基金会、Opera软件公司等纷纷支持HTML5。HTML5被认为是未来互联网发展的一个重要方向，目的是将Web带入一个成熟的应用平台[1]。
3 基于HTML5的视频分享网站的系统架构和功能设计
视频分享网站的设计应以视频用户的习惯和需求来进行，除了要求内容正确客观、时尚创新之外，还应该具备易用性、互动性和超前性。而基于HTML5的视频分享网站不仅在现阶段具有先进性，更重要的是还能适应目前UCD(User Center Design)以用户为中心的设计需求，提供给用户新的Web体验方案，让用户仅仅安装一个浏览器，无需安装其他任何应用程序，就可以更方便地更快速地享受高清流畅的富客户端的观影体验。
该基于HTML5的视频分享网站系统采用B/S的三层架构体系，通过将数据层、商务层和表示层三层分离，不但方便项目的开发，而且还可以提高系统的安全性和可扩展性。该系统功能包含三大模块，分别为：视频服务推送系统、多媒体内容管理系统和视频服务Web 前端EPG系统。
其中，视频服务推送系统，即流媒体服务系统，主要为用户提供视频的点播和直播服务[2]。首先分别对点播和直播的数据源进行处理：对于采集来的直播型数据源，先由编码器将其编码成H.264视频编码和AAC音频编码的格式并封装为MPEG-2 TS文件后再输入到流分割器中，由分割器将此文件切割成以10秒一段的TS文件，同时生成M3U8的索引文件，并随新数据的产生不断更新索引文件；对于点播型数据源，采用MP4进行封装，同时也创建索引文件，但索引文件中只指向一个独立的MP4文件[3，4]。然后由Web服务器或Web缓存系统把这些处理好欲分发的视频文件推送出去。
多媒体内容管理系统主要对存放在存储设备上的多媒体文件进行管理，包括用户管理、视频的上传、在线编辑、检索、分类、评论等功能[2]。
本文所探讨的Web 前端EPG系统是视频网站前端的网站系统，采用HTML5技术。用户通过能支持HTML5 Video标签和HTTP流协议的浏览器如IE9、Firefox 4.0、Opera11和Chrome10等来访问Web页面，通过URL地址先引用视频分发系统中的影片索引文件，再由影片索引文件关联到服务器上的视频资源。该模块主要为用户提供一个良好的视频服务导航机制，一方面将视频节目的附加信息，如内容简介、演员、导演等基本信息提供给用户参考，方便用户选择自己喜欢的视频节目并观看；另一方面提供用户评价系统，让用户看完后对影片进行评价和反馈。
4 HTML5的新特性在Web前端EPG系统的应用
4.1 页面结构元素
为了使页面结构更加清晰明确和容易阅读，HTML5中增加了许多新的页面结构元素[5]，如表1所示。
表1 HTML5中新增的页面结构元素
本Web 前端EPG系统的页面在结构上主要是以图1的形式设计的，用
页面效果如图2所示，主要的代码如下：
- ……
- 台湾地震民众拍惊险瞬间 ……
……
- ……
KYLE休闲小站2013版权所有
图1 页面结构
图2 主页页面效果
4.2 表单元素
表单在Web中有着很重要的作用，它是系统中前台和后台服务器数据交互的一个重要载体。在传统的HTML4中，很多表单功能如输入类型检查、格式验证、非空校验、自动提示等都依赖于Javascript代码来实现，而HTML5在传统表单的基础上尤其对input元素进行了大量的修改，如表2所示增加了许多新的表单类型和属性[6]。
表2 HTML5新表单输入类型和表单属性
有了这些新的类型和属性，开发人员不用编写代码就可对用户输入的数据进行控制和验证，在构建Web页面时变得更加方便和快捷。本Web前端EPG系统的用户注册表单页面效果如图3所示，其中昵称、密码、出生日期、年龄、电话号码、email为必填项且有相对应的输入要求或提示，该表单具有检验输入类型检查、格式验证、非空检验等功能，如若必填项为空时，将提示如图3中“请填写此字段”的提示，主要的代码如下：
图3 用户注册表单页面效果
4.3 多媒体元素
HTML5中对多媒体的支持主要是通过内嵌对象来实现的，主要包括Canvas、Audio、Video等元素。Canvas元素有着非常重要的作用，它像一块画布，通过该元素自带的API结合Javascript代码可以在这个画布上绘制各类图形图像以及动画效果；而Video和Audio作为视频、音频专门的特征标记首批被加入到HTML5标准中，使视频、音频从此不必绑定在Object或Embed 标记中了，而且浏览器不需要任何的插件就能够原生地支持视频、音频、动画，既提高了Web应用的安全性和稳定性，还在一定程度上提高了用户体验。
本Web前端EPG系统的视频播放页面如图4所示。由于在HTML5中并没有给音视频指定一个特定的编码，而由浏览器决定要支持哪些编码，导致了很多不一致。常见的视频解码器有H.264、VP8和Ogg Theora，音频解码器有AAC和Ogg Vorbis[3]。为了能够覆盖当前所有能够支持HTML5的浏览器，需要事先准备好各种编码格式的文件，用Audio或Video标签来导入音频或视频文件时需用source元素来链接这些不同编码格式的媒体文件，同时用Canvas元素来实现视频屏幕截图功能，主要代码如下：
利用canvas元素来实现截图的函数代码如下：
function CatchPicture()
{
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');
canvas.width=video.videoWidth;
canvas.height=video.videoHeight;
ctx.drawImage(video,0,0,canvas.width,canvas.height);
canvas.style.display="block";
}
图4 视频播放页面效果
5 总 结
HTML5具有的新功能新特性，不但强化了Web网页的表现性能，增强了Web应用的安全性和稳定性，而且使互联网的可交互内容越来越丰富完美，极大地提升了用户的体验度。同时它改变了传统HTML4开发的模式，大大减少了网页的代码量，也大大提高了开发人员的开发效率。HTML5是近十年来Web开发标准最巨大的飞跃，具有广阔的应用前景，但浏览器支持的问题仍然是HTML5目前发展中存在的主要问题，主流的Web在转至HTML5之前还有很长的路要走，所幸的是它已经受到越来越多人的关注与研究，相信在不久的将来HTML5标准将趋于完善。
[1] 王江静.Web应用的新技术HTML5[J].电脑知识与技术，2012(11):7462-7465.
[2] 钱戴明.视频及多媒体内容管理系统的研究与实现[D].东华大学，2011:30-31.
[3] 孙丹鹤，王振.基于HTML5的视频网站播控系统[J].电脑知识与技术，2011(36):9517-9518.
[4] 梁洪波.基于代理服务的HTML5视频网站访问方法研究[J].电脑知识与技术，2012(15):3514-3527.
[5] 俞华锋.基于HTML5的网页设计与实现[J].科技信息，2012(29):115-116.
[6] 张纯涛.基于HTML5的SNS教学信息平台的设计与实现[D].中山大学，2011:61-72.
The Implementation in Video Websites Design Based on HTML5 And Web Front End EPG System
XU Zhen-hui
(Department of Computer Engineering, Zhangzhou Institute of Technology, Zhangzhou 363000, China)
HTML5, a new Web standard formulated by W3C, has a great effect on the application of Web. Firstly, this text analyzes the design principles of video sharing website, putting forward the system architecture and function design, which are based on HTML5, and further explores its technical features, especially its new page structure elements, smart meter control and multi-media embedded object, finally applies these new features to the design of Web front end EPG system in video sharing website.
HTML5;the application of Web;video sharing website;Web front end EPG system
2013－03－05
徐镇辉（1979－），男，福建漳浦人，讲师，硕士。
TP393
A
1673-1417（2013）02-0001-06
（责任编辑：季 平）
