HTML5视频网站设计与研究
梁晓娅，张恒
（武汉软件工程职业学院，湖北武汉430205）
摘要：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，Wuhan430050，China)
Abstract:HTML5as a new standard Web,brought a change to the Web front-end production technology.The HTML5video play⁃back technology were analyzed,especially the usage of video markers in the video processing,and combined with the characteris⁃tics of HTML5technology,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在离线浏览、本地存储等方面也有许多创新之处，基于上述特点，HT⁃ML5广受知名IT企业的青睐，例如Adobe、苹果、谷歌、微软等均开始支持HTML5。HTML5被认为能够把Web带入成熟的平台，是将来互联网发展的一个重要方向。目前，各大主流浏览器已经开始支持HTML5[2]。
其中，新增加的video标记，实现了对多媒体的支持，可以用于播放视频流文件，并借助video API可以
自定义HTML视频控件，这就使得浏览器不必再使用插件方式来播放视频，避免了插件的影响；本文通过对该标记的技术特点进行分析，研究如何将其应用于视频网站的设计中。
1video标记
在HTML5中实现视频播放，需要在页面文件中，需要显示视频的位置使用video标记，语法如下[3]：
<video src="1.mp4"width="400"height="300"con⁃trols="controls">
</video>
该标记可以在页面上直接显示视频播放控件。其中添加controls属性来提供视频播放的控制功能。width和height属性可以设置视频在页面上显示的宽度和高度。如果浏览器不支持video标记，提示信息可以放入<video>和</video>标记之间，浏览时会把提示信息显示在video所在的位置[4]。
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]。设置是否要循环播放视频文件。
收稿日期：2015-03-02修稿日期：2015-03-25
基金项目：2013年武汉市属高校教学研究项目（项目编号：2013163）
作者简介：梁晓娅(1981—)，女，讲师，硕士研究生，主要研究方向为计算机应用技术；张恒（1979—
），男，讲师，硕士研究生，主要研究方向为计算机网络技术。
1.1.4autoplay 属性
属性值是BOOL 型。如果video 标记添加了该属性并设置为true ，表示页面将自动播放视频文件，否则表示视频不自动播放。
1.1.5width 属性与height 属性
两个外观属性，width 属性设置video 标记的宽度，height 属性设置video 标记的高度。1.1.6controls 属性[9]
如果设置了该属性，video 标记会显示视频控制按钮，包含播放按钮，全屏控制，音量调整按钮。1.2video 标记的基本用法
<!DOCTYPE HTML>
<html><body>
<video src ="1.mp4"loop ="loop"controls ="controls"width ="400"height ="300"autoplay ="autoplay">
当前浏览器无法显示该视频，请升级至最新版。</video></body></html>
网页运行后，video 标记的显示效果如图1所示
:
图1video 属性
上述网页在IE 中打开后，会马上加载视频文件，并自动播放该文件。当播放结束后，页面会立即重新播放。Video 标记语法还可以用子标记source 元素来指定视频源文件。每个source 元素可以设置独立的视频源文件，source 元素的个数不受限制。语法格式如下所示：
<video width ="400"height ="300"controls ="controls"><source src ="1.avi"type ="video/avi"><source src ="1.mp4"type ="video/mp4">当前浏览器无法显示该视频，请升级至最新版。</video>此例中，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视频网站的整体框架结构、功能模块等进行了深入的探讨和设计，并进行了仔细的研究。
参考文献:
[1]Rob Hawkes.HTML5Canvas 基础教程[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]//2010Interna
（下转第217页）
参与到课堂教学活动中，处于被动接受知识状态，学生的学习积极主动性很难得以培养，更不利于培养他们的创新性。
2对策
2.1多媒体教学要遵循辅助性原则
多媒体技术只是教学的辅助手段，其目的也只能是弥补教师传统教学方式中存在的不足而采取的一种辅助方式，来进一步巩固教师在教学中所占的主导地位，但是决不能完全代替教师的教学地位。所以，我们必须明确：无论运用何种教学手段，其的最终目的都是为了达到预定的教学目标，使学生更容易于理解和掌握所学知识，培养他们的创新能力，所有在教学中运用的教学手段都为达到这个目的。
因此，合理使用多媒体技术进行医学课程教学，不仅将原本枯燥乏味的医学知识变成容易让学生理解和接受的形式，而且将医学中某些抽象概念变得更加生动形象，提高了学生的抽象思维能力；教学内容通过多媒体技术在视觉上和感知上得以具体表现，使学生对所学内容产生浓厚的兴趣，从原本被动的接受变为积极主动的汲取知识，达到提高医学课堂教学效率的目标。
2.2明确多媒体教学目的
众所周知，多媒体教学并非适用所有的教学内容，我们也不能抛弃传统教学中的粉笔与黑板。有人认为用PPT做的课件里面包含大量的文字和图片，添加动画效果、声音效果，，就可以忽略板书。显然这种想法是不正确的，板书在课堂教学中有它的独特之处，这是其他教学辅助工具所无法取代的。多媒体教学技术的引入，使现代医学教学内容形式更加多样化、形象化、直观化、具体化地展现给学生，充分调动了学生学习主观能动性，激发学习动机，促进和提高了学生认知思维的灵活性，扩大了学生的想象空间。多媒体教学其根本目的是辅助教师教学，提高教学效率。因此，切勿盲目使用和侧重于形式，必须根据课程性质、教学内容的不同进行选择性使用。比如通过播放医学视频，可以激发学生对学习医学知识与技能的浓厚兴趣，加深对已掌握的医学理论知识的理解和应用。总而言之，无论采取哪种教学手段进行教学，其目的就是要提高课堂教学效率，增加学生对所学知识的掌握和理解能力。
计算机多媒体技术作为现代化教学辅助手段之一，可将抽象且难以直接用语言来描述的概念以直观形象易接受的形式呈现给学生，虽然它具有传统教学所无法比拟的优势，但却无法替代教师在教学活动中的地位。教师具有丰富的教学经验和独特的人格魅力，通过师生间的情感互动，促使学生主动参与到教学活动中，培养和提高他们的探究式学习的能力。最后，课件内容避免平铺直叙，避免学生产生思维惰性心理，适当的添加质疑等思考性题目，有助于激发学生的思维意识的培养。
为了使计算机多媒体教学与传统教学很好的结合起来，充分发挥其优势，还需要教师努力探索计算机
多媒体教学怎样更加符合学生的认知规律，实现课堂教学效益的最大化，才能培养出适应时代要求合格的医学人才。
参考文献：
[1]马玉萍.护理多媒体教学的实践及体会[J].护理研究,2004,18 (2B):370-371.
[2]李学农，陈军.论多媒体教学的发展与启示[J].医学教育,1994 (12):37-39.
[3]朱学平.试论多媒体技术在计算机教学中的应用[J].计算机
光盘软件与应用,2013（4）.
[4]王红规.多媒体辅助教学应用中存在的问题及对策的探究[J].安徽教育学院学报,2005(3).
[5]马志敏，李汝恒，袁芝琼.多媒体课件在教学中应用效果的调
查及思考[J].大理学院学报,2008(4).
[6]孙威，赵晶，刘洋.浅析多媒体技术在人体解剖学教学应用中
出现的问题及其对策[J].黑龙江医学,2012(8).
（上接第213页）
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 Ap⁃ple'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 Mo⁃bile Applications:Status and Trends[J].Software.2011,28(1): 77-86.
[10]Liu Yougui,Bai Baoxing.Research on GPRS vehicle loca⁃tion network service system[C].2010International Conference on Computer,Mechatronics,Control and Electronic Engineer⁃ing(CMCE).2010:401-404.
[11]俞华锋.基于HTML5的网页设计与实现[J].科技信息,2012 (29):115-116.
HTML5视频网站设计与研究
作者：梁晓娅， 张恒， LIANG Xiao-ya， ZHANG Heng
网站建设网页制作教程作者单位：武汉软件工程职业学院，湖北武汉,430205
刊名：
电脑知识与技术
英文刊名：Computer Knowledge and Technology
年，卷(期)：2015(12)
1.Rob Hawkes；周广新HTML5 Canvas基础教程 2012
2.Butler Android:Changing the Mobile Landscape 2011(1)
3.Wu Jinfei;Liu Hai The study of configuration software and management information systems integration 2010
4.梁洪波基于代理服务的HTML5视频网站访问方法研究[期刊论文]-电脑知识与技术 2012(15)
5.Peter Lubbrs；李杰HTML5高级程序设计 2011
6.Tracy Mobile Application Development Experiences on Ap-ple's iOS and Android OS 2012(4)
7.Gossweiler;McDonough;Lin Argos:Building a Web-Centric Application Platform on Top of Androidf 2011(4)
8.Russ Basiura；杨浩ASP.NET Web服务高级编程 2003
9.Gavalas;Damianos;Economou Development Platforms for Mo-bile Applications:Status and Trends 2011(1)
10.Liu Yougui;Bai Baoxing Research on GPRS vehicle loca-tion network service system 2010
11.俞华锋基于HTML5的网页设计与实现[期刊论文]-科技信息 2012(29)
引用本文格式：梁晓娅.张恒.LIANG Xiao-ya.ZHANG Heng HTML5视频网站设计与研究[期刊论文]-电脑知识与技术 2015(12)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。