HTML5视频网站设计与研究

梁晓娅　张恒

摘要：HTML5作为Web新标准，给Web前端制作带来了技术变革。该文对HTML5视频播放技术进行了分析，特别是video标记在视频处理方面的用法，并结合HTML5的技术特点，研究如何将这些新特性应用于视频网站的设计与制作中。

关键词：HTML5；视频网站；设计

中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2015）12-0212-02

The Research and Design of Video Website HTML5

LIANG Xiao-ya，ZHANG Heng

（Software Engineering Career Academy，Wuhan 430050，China）

Abstract： HTML5 as a new standard Web， brought a change to the Web front-end production technology. The HTML5 video playback technology were analyzed， especially the usage of video markers in the video processing， and combined with the characteristics of HTML5 technology， study on how to design and manufacture of these new features is applied to the video website.

Key words：HTML5； video website； design

2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范完成。该规范是未来Web应用的基础，主要由HTML、CSS等组成，是一个完整的编程规范环境。新规范弥补了以前版本在多媒体和页面交互等方面的缺陷，能够很好的满足目前Web开发和应用中内容多样性、灵活的需求[1]。

在HTML5规范中，提供了很多新的元素和属性，例如，实现了内容与展示的分离；此外还提供了很多交互标记，追加了本地数据库，改善了用户的体验度；除此之外，HTML5在离线浏览、本地存储等方面也有许多创新之处，基于上述特点，HTML5广受知名IT企业的青睐，例如Adobe、苹果、谷歌、微软等均开始支持HTML5。HTML5被认为能够把Web带入成熟的平台，是将来互联网发展的一个重要方向。目前，各大主流浏览器已经开始支持HTML5[2]。

其中，新增加的video标记，实现了对多媒体的支持，可以用于播放视频流文件，并借助video API可以自定义HTML视频控件，这就使得浏览器不必再使用插件方式来播放视频，避免了插件的影响；本文通过对该标记的技术特点进行分析，研究如何将其应用于视频网站的设计中。

1 video标记

在HTML5中实现视频播放，需要在页面文件中，需要显示视频的位置使用video标记，语法如下[3]：

该标记可以在页面上直接显示视频播放控件。其中添加controls属性来提供视频播放的控制功能。width和height属性可以设置视频在页面上显示的宽度和高度。如果浏览器不支持video标记，提示信息可以放入标记之间，浏览时会把提示信息显示在video所在的位置[4]。

1.1 video 标记的属性

下面对HTML5的新标记video相关属性的用法进行详细介绍，常用属性有6个[5]。

1.1.1 src属性

用于设置视频文件地址，并可以和另外两个属性搭配使用[6]：

1）type属性，指定src属性视频的类型。

2）media属性，默认值为all，表示支持所有视频文件。该属性表示媒体在何种媒介中使用，可以不设置该属性。

1.1.2 preload属性[7]

该属性定义视频文件是否要进行预加载处理。在标记中若设置了该属性，在页面加载时会自动加载视频，准备播放。若标记中同时设置了"autoplay"属性，则该属性无效。

1.1.3 loop属性

属性值是BOOL型[8]。设置是否要循环播放视频文件。

1.1.4 autoplay属性

属性值是BOOL型。如果video标记添加了该属性并设置为true，表示页面将自动播放视频文件，否则表示视频不自动播放。

1.1.5 width属性与height属性

两个外观属性，width属性设置video标记的宽度，height属性设置video标记的高度。

1.1.6 controls属性[9]

如果设置了该属性，video标记会显示视频控制按钮，包含播放按钮，全屏控制，音量调整按钮。

1.2 video 标记的基本用法

<！DOCTYPE HTML>

当前浏览器无法显示该视频，请升级至最新版。

网页运行后，video标记的显示效果如图1所示：

上述网页在IE中打开后，会马上加载视频文件，并自动播放该文件。当播放结束后，页面会立即重新播放。Video标记语法还可以用子标记source元素来指定视频源文件。每个source元素可以设置独立的视频源文件，source元素的个数不受限制。语法格式如下所示：

当前浏览器无法显示该视频，请升级至最新版。

此例中，video标记没有设置src属性，但添加了两个source元素。source元素设置源文件分别为"1.avi"与"1.mp4"，网页将自动加载第一个能够被识别的文件格式。

2 视频网站设计

视频网站将以HTML5的新标记video为基础，保证视频网站实现起来简洁，高效。此外，网站设计将按照网页设计的基本原则，以用户需求为基础，充分尊重用户的使用习惯，同时还应具有使用简便、交互友好和前瞻性等特征。而基于HTML5的视频网站能够很好的满足上述需要。

目前，HTML5技术不仅具有先进性，而且还能体现以用户为中心的网站设计理念。普通用户无需像传统视频网站那样，安装视频插件来完成视频播放，而只需用一个支持HTML5的浏览器，就能够直接播放视频，获得更佳的用户体验[10]。

通过分析设计，本文研究的视频网站采用B/S三层架构模式，分为数据层、业务逻辑层和表示层。通过分层划分，可以降低网站开发的复杂度，更好的控制进度，维护与测试也更方便，同时提高了网站的可扩展性。该视频网站分为三个主要模块，分别为：数据提供模块、后台管理模块和前端展示模块。

数据提供模块，主要提供流媒体数据服务，响应用户的请求，提供视频播放所需的数据。首先按规定流程处理各种视频数据源：对于采集来的直播型数据源，需要进行数据格式的转换，将数据编码成H.264格式和MP4音频的格式，再采用加文件头的形式封装成MPEG-2 TS文件后转入流分割器中进行逻辑处理，得到的文件会按照10秒一段的标准进行分割，并生成分割文件的索引。随着视频数据的不断增加，索引数据也要同步进行更新维护；然后以服务形式供Web模块来调用这些处理好的视频文件。

后台管理模块主要对保存在服务器上的视频文件进行维护和管理，主要包括视频文件的上传审核、删除、权限分配等功能。

前端展示模块，采用HTML5技术，特别是video标记来完成视频在页面上的显示。通过页面编程控制和URL 地址来调用视频的索引文件，然后根据索引文件来查找视频文件在服务器上的位置。

以上三个模块，相互配合，共同完成视频的所有服务和反馈。为用户提供了良好的视频服务平台。用户可以随时浏览视频节目信息，选择自己喜爱的视频节目。

3 结束语

HTML5作为一个推出不久的Web标准规范，具有很多新的功能和特性，更进一步的增强了网页的性能和展示体验，特别是在三维、图形和特效方面改进明显[11]。随着互联网技术的进步，网络交互的内容变得越来越丰富，迫切需要一种新标准与当前网页应用需求相适应。HTML5很好的满足了这一需求。它改变了HTML前几个版本的设计习惯，显著减少了网页开发的工作量，并提供了更优秀的图形和特效体验。

本文探讨与总结了传统视频网站存在的不足，讨论了采用HTML5技术解决视频网站中存在的若干主要问题，对HTML5视频网站的整体框架结构、功能模块等进行了深入的探讨和设计，并进行了仔细的研究。

参考文献：

[1]Rob Hawkes.HTML5 Canvas基础教程[M]. 周广新， 译.北京： 人民邮电出版社， 2012.

[2] Butler. Android： Changing the Mobile Landscape[J]. Pervasive Computing. 2011， 10（1）：4-7.

[3] Wu Jinfei，Liu Hai. The study of configuration software and management information systems integration[C]// 2010 Interna tional Conference on Computer Design and Applications （ICCDA）. 2010：144-147.

[4] 梁洪波. 基于代理服务的HTML5视频网站访问方法研究[J]. 电脑知识与技术， 2012（15）： 3514-3527.

[5] Peter Lubbrs. HTML5高级程序设计[M]. 李杰， 译. 北京： 人民邮电出版社， 2011.

[6] Tracy. Mobile Application Development Experiences on Apple's iOS and Android OS[J]. Potentials. 2012， 31（4）： 30-34.

[7] Gossweiler， McDonough， Lin， et al. Argos： Building a Web-Centric Application Platform on Top of Androidf [J]. Pervasive Computing. 2011， 10（4）： 10-14.

[8] Russ Basiura. ASP.NET Web服务高级编程[M]. 杨浩， 译. 北京： 清华大学出版社， 2003（2）.

[9] Gavalas， Damianos， Economou. Development Platforms for Mobile Applications： Status and Trends[J]. Software. 2011， 28（1）： 77-86.

[10] Liu Yougui， Bai Baoxing. Research on GPRS vehicle location network service system[C]. 2010 International Conference on Computer， Mechatronics， Control and Electronic Engineering （CMCE）. 2010： 401-404.

[11]俞华锋. 基于HTML5的网页设计与实现[J]. 科技信息， 2012（29）： 115-116.