Html5对表单、视频及音频功能性探索.docx

《Html5对表单、视频及音频功能性探索.docx》由会员分享，可在线阅读，更多相关《Html5对表单、视频及音频功能性探索.docx（8页珍藏版）》请在第壹文秘上搜索。

1、HtmI5对表单、视频及音频功能性探究1HTM1.5对表单的支持下面小标题描述部分表的的新功能特性.I,入根自动获得焦点实现在网页加我完成毡，光标自动聚焦在用户须要输入的地方，比如邮箱登陆页面的输入用户名，之前我们须要在网页onload的时候来用javascript代码指定某个输入框获得焦点的做法，现在html5干脆支持在输入框中加入autofocus属性。2文本根的入提示实现之前我们须要用javascript的onblur.onfocus来实现一个输入框的提示信息，而在HTM1.5中我们只需写下如下代码即可实现实现效果如图31所示.Email：Iexanplfdomain.t图31输入提示示

2、例在类型后面增加个PlaCehOlder屈性.屈性的值就是提示框里的假.3表单验证功能1)推断必填项:有些表单项是衣单内必埴项，和以往和比现在只须要在表单项中增加一个碱性，required即可.示例代码如下：假如此项为空,则会有相应提示,效果如图3-2所示.发如此项为空,则会有相应提示.2）推断数据格式在HTM1.5中，时数据格式的校验，也是属户内建类型，相应的表单项类型会有相应的内建粉证规则，不须要我们额外编写JaVaSCriPt代妈来实现.代码如下Kn,iInputtype=emai阅读器会自调用内建的Email险证代码，船证当前的输入项是法合法,效果如图33所示.4滑动快入的实现在输入数

3、字类型笄可变值时,我们也可以通过搐动滑动块的形式来选择合适的值，特殊是在选择颜色值时,拖动滑动块变更颜色的RGB值.更为直观可行.Range滑动块代码实现如下：效果如图3-4所示.Age：-Q乂图34激动块示例可以干脆拖动,可以设置最小曲、最大伯、以及每拖动一格的步长.Min及max属性设湿滑动块的G小值与以大做，Step设置滑动块拖动的步长.5数字,入据实现除了的滑动块可以输入数侪外,HTM1.5还有另一种数据输入类型NUmber.运用此M性可以能过点击轮入枢后面的增加或削减小按钮来调整要输入的数位.实现代码如下：Vnputlype=number/效果如图3-5所示.图3-5数字输入示例刖如

4、此少的代码,就能实现如此好玩的功能，HTM1.5到来如何能不让大家心动。6输入框下拉提示实现清行HTM1.5时表单下拉输入根的嵌图展示，由此我们输入表单的时候，可以很便利的从侦设值中选择要给人的信息.下拉提示的核心代码如下：optionvalue=*label=,Bingsearchengines：httpwv效果如图36所示.GoogleYahooBingBaidu图36下拉提示示例可以用作现在很流行的ajax输入提示,也可以当作是一个可端轼的卜拉菜单。即可自行输入.也可以干脆下拉选择.但是运用用脚本代码也太过干烦索HTM1.5可以很好解决这个问国.7日期选舞柢实现它可以让我们很便利的运用1

5、1期选界框，不须要我们再用很困玳的JaVaSCriPt代码来实现了。该选择框的核心代眄如下：Date表单项可以让我们干脆选择日期，便利我们输入H期选择框效果如图37所示。K文件上传功总块实现运用此功能我们可以很轻松的上传文件代码如下：效果如图38所示7.个性头案:F:CWP-s-AVIdi,送鳌图3-8文件上传示例AeeePt是文件接受的类型，可以用指代所以有文件2对视频和音频的支持视频和音频站我们在互联网上运用最频烦最多的，然而网站开发人员却要因为插件不同编写大量JR处性代码，时用户来说也要装多种插件，如今HTM1.5内建支持视频音频，IVideolttW3C公布的HTM1.5标准草案中VV

6、ideo中的属性和描述如表31所示.表31VideO属性表属性(ft描述autoplaytruefalse除如是tre,则视顿在就绪后立刻描放，controlstruefalse黄如是true,则向用户显示控件，比如播放按钮.heightpixels设词觇频播放器的而度，loopendnumericvalue定义在视频流中循环播放停止的位置.loopstartnumericvalue定义在视频流中循环播放的起先位置.playcountnumericvalue定义视频片段播放多少次.默认是1-posterurl在视频播放之前所显示的图片的UR1.isrcurl要播放的视频的UR1.startnu

7、mericvalue定义播放器在音频流中起先播放的位置,widthpixels设假视频播放器的宽度Hl上表可以看出,通过阅读以本身对视频的支持,能够完成常用的视频操作.2Yide。标签实现以下是视频在完全支持VVide。阅读器中的通用代码，通过如此渝短的代码，我们便能在自己的网站上，嵌入我们的视频，丰富我们的页面，核心代码如下：您的阅读潺不支持VVideo标签！请您运用最新Firefox.Opera1Safari1Chrome阅读器观看！I-这段文字在您的阅读器不支持时显示-在chrome网读零里的视版播放效果如图3-9所示和为播放图39视频播放示例觇频标程的控件很简治，只有播放;皆停按钮，进

8、度栏可以拖动先择播放，还有音收限制器。互动功能有些简洁,可以通过海加额外的代码获得更多的互动限制，但是满意基本的视频播放不成问题.关于各阅读器时视炖格式的支持状况请看第一章小节各阅读器对HTM1.53姣视频格式的支持速宜表测试显示：FirefOX3.6与IE8支持不好，ChrOme与OPera能很正常显示，但是支持不同的格式.3Audio的属性W3C公布的HTM1.5标准草案UyAudio中的属性和描述如表3-2所示.表3-2AUdi。属性衣属性依描述autoplaytrueIfalse假如是true,则音城在就绪后立刻播放.controlstrueIfalse假如是true.则向用户显示控件

9、.比如播放按1.endnumericvalue定义播放器在音频流中的何处停止播放.loopendnumericvalue定义在音频流中循环播放停止的位置100pstartnumericvalue定义在音频流中循环播放的起先位田，srcurl所播放音频的uri.startnumericvalue定义播放器在音频流中起先播放的位置.2Audio标签实现以下是视频在完全支持VaUdio回诩器中的通用代码VaUdiOsrc=王.菲-传奇.oggCOntrOIS=controlsautoplay您的阅读器不支持VaUdio标签！请您运用最新Firefox1Opera-Safari1Chrome阅读海观看

10、！VI-上段文字在您的阅读涔不支持时显示-对音频的支持,各阅读器较统.除IE外都支扑MP3程式,在青嫉方面对的应用不会有格式的隔碍.播放效果如图3-10所示，音罢接法:AI00:19图10音频播放示例关于各阅读器时音顼格式的支持状况请看笫一章小节各阅读器对HTM1.5音频视频格式的支持速查友测试显示:Firefox3.6与IE6支持不好，ChromeOpera能很正常显示。测试结果：IE阅漆器不支持,FirefOX3.6也不支持,只有ChrOme和Safari例读器支持.总结通过对VVideo和VaUdio标签的探究和实现，域本可以实现网页内嵌入觇频和音频的需求.但不足的是本论文仅仅演示了VVideo,audio标签的基本功能,对于困难的实际应用有一段距离.但是以此足以证明HTM1.5在流媒体方面支持功能的强大，以后要在这方面笠加I探讨和实践，