HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
video
通过<video>标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片。
过去(及目前),我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中,但这种方式要求浏览器安装有Flash插件,并支持JavaScript:
<objectclassid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"width="425"height="344"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><paramname="allowFullScreen"value="true" /><paramname="allowscriptaccess"value="always" /><paramname="src"value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /><paramname="allowfullscreen"value="true" /><embedtype="application/x-shockwave-flash"width="425"height="344"src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&"allowscriptaccess="always"allowfullscreen="true"></embed></object>
HTML5的方式:
<videowidth="640"height="360"src="http://www.youtube.com/demo/google_main.mp4"controls autobuffer><p> Try this page in Safari 4! Or you can<ahref="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p></video>
<video>标签有如下几个常用属性:
- Autoplay: 用来设定视频是否在页面加载后自动播放。
- Src: 为视频指定文件链接或下载路径,当浏览器不支持<video>标签或发生某种播放错误时,可以提供给用户进行下载。
- Autobuffer: 用来设定视频是否自动缓冲;如果设定,那么页面加载之后,视频会自动下载缓冲,当用户点击播放按钮后,至少已经有一部分视频可以直接观看而无需等待了。
- Poster: 用来为视频设置一个“相框默认图片”性质的背景图片;当视频无法正常加载播放时可以向用户呈现。
- Controls: 用来设置是否为视频添加控制条,例如“播放”、“暂停”等;控制条的外观可以自定义。
- Loop: 用来设置视频是否循环播放。
- Width , Height: 用来控制视频的宽度与高度。
虽然<video>元素备受关注且大有潜力,不过距离被主流浏览器全面支持仍有待时日;目前,如果一定有必要使用<video> 标签,我们可以使用类似如下不伦不类的代码组合方式:
<videowidth="640"height="360"src="http://www.youtube.com/demo/google_main.mp4"autobuffer controls poster="whale.png"><objectclassid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b"width="640"height="360"codebase="http://www.apple.com/qtactivex/qtplugin.cab"><paramvalue="http://www.youtube.com/demo/google_main.mp4"><paramvalue="true"><paramvalue="false"><embedsrc="http://www.youtube.com/demo/google_main.mp4"width="640"height="360"autoplay="true"controller="false"pluginspage="http://www.apple.com/quicktime/download/"></embed></object></video>
audio
HTML5中的新元素标签<audio>是被大家等待已久的,它有原生支持音频播放的功能,而不需要浏览器安装额外的扩展;目前支持<audio>元素的浏览器主要有Safari 4,Firefox 3.5和Chrome 3。
<audio>元素标签的一些常用属性:
- src:音频文件路径。
- autobuffer:设置是否在页面加载时自动缓冲音频。
- autoplay:设置音频是否自动播放。
- loop:设置音频是否要循环播放。
- controls:设置是否显示播放控制面板。
可以看到这些属性和<video>元素标签的属性很类似。下面我们来看一个代码范例:
<audiosrc="elvis.ogg"controls autobuffer></audio>
这段代码可以在Firefox 3.5和Chrome 3中正常工作,对于Safari 4来说要使用ogg格式的音频文件替换掉mp3文件。不过,鉴于W3C的HTML5定义规范并没有最终完成,这些格式限制也许在将来会有所变化。
根据定义规范,以下几种API方法是可以使用的:
- play():播放音频
- pause():暂停播放
- canPlayType():命令浏览器判断当前音频文件是否可以被播放
- buffered():设定文件需要缓冲部分的开始与结束时间点。
另外,我们可以使用<source>元素标签来配合<audio>;<source>用来指定多个音频文件,如果当前浏览器不支持第一个文件,那么<audio>会自动尝试播放下面一个<source>中指定的文件;我们还可以在它们后面加上目前常规的<embed>代码来加载Flash播放器,作为后备方案;范例如下:
<audiocontrols autobuffer><sourcesrc="elvis.ogg" /><sourcesrc="elvis.mp3" /><!--now include flash fall back--></audio>
meter
meter元素标签用来表示范围已知且可度量的等级标量或分数值,如磁盘使用量比例、关键词匹配程度等。需要注意的是,<meter>不可以用来表示那些没有已知范围的任意值,例如重量、高度,除非已经设定了它们值的范围。<meter>元素共有6个属性:
- Value:表示当前标量的实际值;如果不做指定,那么<meter>标签中的第一个数字就会被认为是其当前实际值,例如<meter>2 out of 10</meter>中的“2”;如果标签内没有数字,那么标量的实际值就是0。
- Min:当前标量的最小值;如不做指定则为0。
- Max:当前标量的最大值;如不做指定则为1;如果指定的最大值小于最小值,那么最小值会被认为是最大值。
- Low:当前标量的低值区;必须小于或等于标量的高值区数字;如果低值区数字小于标量最小值,那么它会被认为是最小值。
- High:当前标量的高值区。
- Optimum:最佳值;其范围在最小值与最大值区间当中,并且可以处于高值区。
来看一些代码范例;首先,不设定任何属性的状况:
<p>Your score is: <meter>2 out of 10</meter></p>
然后呢,可以增加最大值与最小值的属性设定:
<p>Your score is: <metermin="0"max="10">2 out of 10</meter></p>
增加了低值区、高值区和最佳值的属性设定:
<p>Your score is: <metervalue="91"min="0"max="100"low="40"high="90"optimum="100">A+</meter></p>
这时<meter>的最大值会被认为是100%或1。
下面这段代码可以用作节日倒计时:
<p>Christmas is in <metervalue="30"min="1"max="366"title="days">30 days!</p>
<meter>标签中的内容可以不包含任何数字,这时最大值会被认为是1;可以参考以下的代码:
<p><metervalue="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p><p><metervalue="0.25">Low activity,</meter> Usenet, 22 subscribers</p><p><metervalue="0.25">Low activity,</meter> Usenet, 66 subscribers</p>
datalist
datalist 与 input 的新属性list一起使用可以创建组合框,双击input的时候可以提供选项让用户选择,类似历史记录一样。
<inputlist="browsers"><datalistid="browsers"><optionvalue="Safari"><optionvalue="Internet Explorer"><optionvalue="Opera"><optionvalue="Firefox"></datalist>
keygen
<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。
<formaction="demo_keygen.asp"method="get">Username: <inputtype="text"name="usr_name" />Encryption: <keygenname="security" /><inputtype="submit" /></form>
output
<output> 标签定义不同类型的输出,比如脚本的输出。例如:
<formaction=""method="get"><p> 10 + 5 = <outputname="sum"></output></p><buttontype="submit">计算</button></form> <scripttype="text/javascript">(function() {varf=document.forms[0];if(typeoff['sum']!== 'undefined') { f.addEventListener('submit',function(e) { f['sum'].value= 15; e.preventDefault(); },false); }else{ alert('你的浏览器尚未准备好!'); }})();</script>
HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output相关推荐
- 新元素之video,audio,meter,datalist,keygen,output
video 通过<video>标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件.视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片. 过去(及目前) ...
- HTML5学习笔记简明版(3):新元素之hgroup,header,footer,address,nav
hgroup <hgroup> 标签用于对网页或区段(section)的标题进行组合. <hgroup><h1>Welcome to my WWF</h1&g ...
- HTML5学习笔记简明版(2):新元素之section,article,aside
section section元素描绘的是一个文档或者程序里的普通的section节,一般来说一个section包含一个head和一个content内容块.section可以表示成一个小节,或者tab ...
- HTML5学习笔记简明版(5):input的type超级类型
HTML5为input的type类型添加了多种枚举值,用来表达不同的意思.同事具有验证功能,假设格式不正确,浏览器将原始提供错误提示,堪称超级牛X啊,详细例如以下: Keyword Data type ...
- HTML5学习笔记简明版(10):过时的元素和属性
被遗弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用,现有文档升级到 HTML5的话能够使用一些替代方案.比如parser section 能够处理isindex 元素的功能. ...
- HTML5学习笔记简明版(10):废弃的元素和属性
废弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用.现有文档升级到 HTML5的话能够使用一些替代方案.比如parser section 能够处理isindex 元素的功能. ...
- HTML5学习笔记简明版(9):变化的元素和属性
改变的元素(Element) 下面元素在HTML5里的使用方法稍作改动以便能在web里更好的使用或者起到更大作用: 没有href属性的a元素将显示成一个占位符,并且a元素内部如今支持flow cont ...
- HTML5学习笔记简明版(8):新增的全局属性
contenteditable属性 不论什么元素使用contenteditable属性的话,代表该元素是一个可编辑的区域. 用户能够改变元素的内容以及操作标记.比如: <pcontentedit ...
- HTML5学习笔记简明版(11):新API
HTMLDocument上的扩展 HTML5在DOM Level 2 HTML上扩展了一些HTMLDocument的接口. 这些接口在全部实现了Document接口的元素对象上进行了实现.HTML5在 ...
最新文章
- 突破性进展!上海光机所成果登上《Nature》封面!
- VS2010 ASP.NET MVC4 安装失败问题
- Java Activiti 工作流引擎 流程审批 后台框架源码 springmvc SSM
- wxpython 优秀的界面_wxPython 界面设计利器:wxFormBuilder 介绍
- boost::outcome模块comparison相关的测试程序
- python函数对变量的作用域_python函数变量作用域如何理解使用?
- 如何理解VMware内存资源管理
- 细说Golang的JSON解析
- data/mysql_error_trace.inc,09-在线挑战详细攻略-《真的很简单》
- IOS检查更新的方法
- c++多边形扫描线填充算法_一文读懂扫描线算法
- 【转】MapGISnbsp;K9基础系…
- dubbo 在centos7下安装
- Mysql全文索引解析
- IMU与Gyro及其它相关
- linux改文件夹e45,linux 编辑文件时 E45: 'readonly' option is set (add ! to override) 隐藏属性 chattr lsattr...
- 如何防止网站静态文件被挂马
- android 列表倒计时,Android ListView列表实现倒计时
- 灰度图像增强和图像去噪
- Web前端:Web前端开发工程师工作内容网页案例设计