HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
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,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.易做图.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344"
src="http://www.易做图.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>
HTML5的方式:
<video width="640" height="360" src="http://www.易做图.com/demo/google_main.mp4" controls autobuffer>
<p>
Try this page in Safari 4! Or you can
<a href="http://www.易做图.com/demo/google_main.mp4">download the video</a>
instead.
</p>
</video>
<video>标签有如下几个常用属性:
1. Autoplay: 用来设定视频是否在页面加载后自动播放。
2. Src: 为视频指定文件链接或下载路径,当浏览器不支持<video>标签或发生某种播放错误时,可以提供给用户进行下载。
3. Autobuffer: 用来设定视频是否自动缓冲;如果设定,那么页面加载之后,视频会自动下载缓冲,当用户点击播放按钮后,至少已经有一部分视频可以直接观看而无需等待了。
4. Poster: 用来为视频设置一个“相框默认图片”性质的背景图片;当视频无易做图常加载播放时可以向用户呈现。
5. Controls: 用来设置是否为视频添加控制条,例如“播放”、“暂停”等;控制条的外观可以自定义。
6. Loop: 用来设置视频是否循环播放。
7. Width , Height: 用来控制视频的宽度与高度。
虽然<video>元素备受关注且大有潜力,不过距离被主流浏览器全面支持仍有待时日;目前,如果一定有必要使用<video> 标签,我们可以使用类似如下不伦不类的代码组合方式:
<video width="640" height="360" src="http://www.易做图.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param value="http://www.易做图.com/demo/google_main.mp4">
<param value="true">
<param value="false">
<embed src="http://www.易做图.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>元素标签的一些常用属性:
1. src:音频文件路径。
2. autobuffer:设置是否在页面加载时自动缓冲音频。
3. autoplay:设置音频是否自动播放。
4. loop:设置音频是否要循环播放。
5. controls:设置是否显示播放控制面板。
可以看到这些属性和<video>元素标签的属性很类似。下面我们来看一个代码范例:
<audio src="elvis.ogg" controls autobuffer></audio>
这段代码可以在Firefox 3.5和Chrome 3中正常工作,对于Safari 4来说要使用ogg格式的音频文件替换掉mp3文件。不过,鉴于W3C的HTML5定义规范并没有最终完成,这些格式限制也许在将来会有所变化。
根据定义规范,以下几种API方法是可以使用的:
1. play():播放音频
2. pause():暂停播放
3. canPlayType():命令浏览器判断当前音频文件是否可以被播放
4. buffered():设定文件需要缓冲部分的开始与结束时间点。
另外,我们可以使用<source>元素标签来配合<audio>;<source>用来指定多个音频文件,如果当前浏览器不支持第一个文件,那么<audio>会自动尝试播放下面一个<source>中指定的文件;我们还可以在它们后面加上目前常规的<embed>代码来加载Flash播放器,作为后备方案;范例如下:
<audio controls autobuffer>
<source src="elvis.ogg" />
<source src="elvis.mp3" />
<!-- now include flash fall back -->
</audio>
meter
meter元素标签用来表示范围已知且可度量的等级标量或分数值,如磁盘使用量比例、关键词匹配程度等。需要注意的是,<meter>不可以用来表示那些没有已知范围的任意值,例如重量、高度,除非已经设定了它们值的范围。<meter>元素共有6个属性:
1. Value:表示当前标量的实际值;如果不做指定,那么<meter>标签中的第一个数字就会被认为是其当前实际值,例如<meter>2 out of 10</meter>中的“2”;如果标签内没有数字,那么标量的实际值就是0。
2. Min:当前标量的最小值;如不做指定则为0。
3. Max:当前标量的最大值;如不做指定则为1;如果指定的最大值小于最小值,那么最小值会被认为是最大值。
4. Low:当前标量的低值区;必须小于或等于标量的高值区数字;如果低值区数字小于标量最小值,那么它会被认为是最小值。
5. High:当前标量的高值区。
6. Optimum:最佳值;其范围在最小值与最大值区间当中,并且可以处于高值区。
来看一些代码范例;首先,不设定任何属性的状况:
<p>Your score is: <meter>2 out of 10</meter></p>
然后呢,可以增加最大值与最小值的属性设定:
<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>
增加了低值区、高值区和最佳值的属性设定:
<p>Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>
这时<meter>的最大值会被认为是100%或1。
下面这段代码可以用作节日倒计时:
<p>Christmas is in <meter value ="30" min="1" max="366" title="days">30 days!</p>
<meter>标签中的内容可以不包含任何数字,这时最大值会被认为是1;可以参考以下的代码:
<p><meter val
补充:web前端 , HTML 5 ,
- 更多html/css疑问解答:
- div+css中关于ie浏览器中非啊元素的:hover的实现问题,哪位大神指点下啊
- css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px
- css 属性选择器 ie6 不支持吗?
- 用css、jquery做的选项卡效果,有一个小疑问,请高手指点,代码如下:
- 介绍本学习css的书
- wordpress多个CSS样式怎么调用?
- 这个div 的css是如何编写的
- div+css中,div的右边框小于div的高度且居中,除了用背景图片,如何实现?
- 表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写
- CSS 在一个大的DIV里面,另一个DIV怎么居中并置底。
- dw中html文档为什么无法链接css文档
- 设计一个小例子说明DIV+CSS的优势(例子要解释并注释)。
- 我会html css目前正在学js,打算在大三的寒假找个实习,请问应该找哪方面的实习?
- css问题,跪求大大帮忙
- 请教网页设计高手,如下图的这种css代码怎么写?