视频网站设计与研究范文

1video标记

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

1.1.1src属性用于设置视频文件地址，并可以和另外两个属性搭配使用[6]：1)type属性，指定src属性视频的类型。2)media属性，默认值为all，表示支持所有视频文件。该属性表示媒体在何种媒介中使用，可以不设置该属性。

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

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

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

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

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

1.2video标记的基本用法上述网页在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-2TS文件后转入流分割器中进行逻辑处理，得到的文件会按照10秒一段的标准进行分割，并生成分割文件的索引。随着视频数据的不断增加，索引数据也要同步进行更新维护；然后以服务形式供Web模块来调用这些处理好的视频文件。后台管理模块主要对保存在服务器上的视频文件进行维护和管理，主要包括视频文件的上传审核、删除、权限分配等功能。前端展示模块，采用HTML5技术，特别是video标记来完成视频在页面上的显示。通过页面编程控制和URL地址来调用视频的索引文件，然后根据索引文件来查找视频文件在服务器上的位置。以上三个模块，相互配合，共同完成视频的所有服务和反馈。为用户提供了良好的视频服务平台。用户可以随时浏览视频节目信息，选择自己喜爱的视频节目。

3结束语

HTML5作为一个推出不久的Web标准规范，具有很多新的功能和特性，更进一步的增强了网页的性能和展示体验，特别是在三维、图形和特效方面改进明显[11]。随着互联网技术的进步，网络交互的内容变得越来越丰富，迫切需要一种新标准与当前网页应用需求相适应。HTML5很好的满足了这一需求。它改变了HTML前几个版本的设计习惯，显著减少了网页开发的工作量，并提供了更优秀的图形和特效体验。本文探讨与总结了传统视频网站存在的不足，讨论了采用HTML5技术解决视频网站中存在的若干主要问题，对HTML5视频网站的整体框架结构、功能模块等进行了深入的探讨和设计，并进行了仔细的研究。

作者：梁晓娅 张恒 单位：武汉软件工程职业学院