video
通过<video>标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片。
过去(及目前),我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中,但这种方式要求浏览器安装有Flash插件,并支持JavaScript:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,40,0"> param name="allowFullScreen" value="true" /> ="allowscriptaccess"="always" ="src"="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" ="allowfullscreen"embed type="application/x-shockwave-flash" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"</embed> object>
HTML5的方式:
- Autoplay: 用来设定视频是否在页面加载后自动播放。
- Src: 为视频指定文件链接或下载路径,当浏览器不支持<video>标签或发生某种播放错误时,可以提供给用户进行下载。
- Autobuffer: 用来设定视频是否自动缓冲;如果设定,那么页面加载之后,视频会自动下载缓冲,当用户点击播放按钮后,至少已经有一部分视频可以直接观看而无需等待了。
- Poster: 用来为视频设置一个“相框默认图片”性质的背景图片;当视频无法正常加载播放时可以向用户呈现。
- Controls: 用来设置是否为视频添加控制条,例如“播放”、“暂停”等;控制条的外观可以自定义。
- Loop: 用来设置视频是否循环播放。
- Width,Height: 用来控制视频的宽度与高度。
虽然<video>元素备受关注且大有潜力,不过距离被主流浏览器全面支持仍有待时日;目前,如果一定有必要使用<video> 标签,我们可以使用类似如下不伦不类的代码组合方式:
audio
HTML5中的新元素标签<audio>是被大家等待已久的,它有原生支持音频播放的功能,而不需要浏览器安装额外的扩展;目前支持<audio>元素的浏览器主要有Safari 4,Firefox 3.5和Chrome 3。
<audio>
元素标签的一些常用属性:- src:音频文件路径。
- autobuffer:设置是否在页面加载时自动缓冲音频。
- autoplay:设置音频是否自动播放。
- loop:设置音频是否要循环播放。
- controls:设置是否显示播放控制面板。
可以看到这些属性和<video>元素标签的属性很类似。下面我们来看一个代码范例:
根据定义规范,以下几种API方法是可以使用的:
另外,我们可以使用<source>元素标签来配合<audio>;<source>用来指定多个音频文件,如果当前浏览器不支持第一个文件,那么<audio>会自动尝试播放下面一个<source>中指定的文件;我们还可以在它们后面加上目前常规的<embed>代码来加载Flash播放器,作为后备方案;范例如下:
meter元素标签用来表示范围已知且可度量的等级标量或分数值,如磁盘使用量比例、关键词匹配程度等。需要注意的是,<meter>不可以用来表示那些没有已知范围的任意值,例如重量、高度,除非已经设定了它们值的范围。<meter>元素共有6个属性:
- Value:表示当前标量的实际值;如果不做指定,那么<meter>标签中的第一个数字就会被认为是其当前实际值,例如<meter>2 out of 10</meter>中的“2”;如果标签内没有数字,那么标量的实际值就是0。
- Min:当前标量的最小值;如不做指定则为0。
- Max:当前标量的最大值;如不做指定则为1;如果指定的最大值小于最小值,那么最小值会被认为是最大值。
- Low:当前标量的低值区;必须小于或等于标量的高值区数字;如果低值区数字小于标量最小值,那么它会被认为是最小值。
- High:当前标量的高值区。
- Optimum:最佳值;其范围在最小值与最大值区间当中,并且可以处于高值区。
下面这段代码可以用作节日倒计时:
datalist 与 input 的新属性list一起使用可以创建组合框,双击input的时候可以提供选项让用户选择,类似历史记录一样。
<keygen>
标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。<output>
标签定义不同类型的输出,比如脚本的输出。例如:版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。