标签：html5
通过<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.youtube.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.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
HTML5的方式：
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer> <p> Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead. </p> </video>
<video>标签有如下几个常用属性：
虽然<video>元素备受关注且大有潜力，不过距离被主流浏览器全面支持仍有待时日；目前，如果一定有必要使用<video> 标签，我们可以使用类似如下不伦不类的代码组合方式：
<video width="640" height="360" src="http://www.youtube.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.youtube.com/demo/google_main.mp4"> <param value="true"> <param value="false"> <embed src="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>
HTML5中的新元素标签<audio>是被大家等待已久的，它有原生支持音频播放的功能，而不需要浏览器安装额外的扩展；目前支持<audio>元素的浏览器主要有Safari 4，Firefox 3.5和Chrome 3。
<audio>元素标签的一些常用属性：
可以看到这些属性和<video>元素标签的属性很类似。下面我们来看一个代码范例：
<audio src="elvis.ogg" controls autobuffer></audio>
这段代码可以在Firefox 3.5和Chrome 3中正常工作，对于Safari 4来说要使用ogg格式的音频文件替换掉mp3文件。不过，鉴于W3C的HTML5定义规范并没有最终完成，这些格式限制也许在将来会有所变化。
根据定义规范，以下几种API方法是可以使用的：
另外，我们可以使用<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>元素共有6个属性：
来看一些代码范例；首先，不设定任何属性的状况：
<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 value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p> <p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p> <p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>
datalist 与 input 的新属性list一起使用可以创建组合框，双击input的时候可以提供选项让用户选择，类似历史记录一样。
<input list="browsers"> <datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"> </datalist>
<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>
<output> 标签定义不同类型的输出，比如脚本的输出。例如：
<form action="" method="get"> <p> 10 + 5 = <output name="sum"></output> </p> <button type="submit">计算</button> </form> <script type="text/javascript"> (function() { var f = document.forms[0]; if ( typeof f[‘sum‘] !== ‘undefined‘ ) { f.addEventListener(‘submit‘, function(e) { f[‘sum‘].value = 15; e.preventDefault(); }, false); } else { alert(‘你的浏览器尚未准备好！‘); } })(); </script>
版权声明：本文为博主http://www.zuiniusn.com原创文章，未经博主允许不得转载。
HTML5学习笔记简明版（4）：新元素之video,audio,meter,datalist,keygen,output
标签：html5
原文地址：http://blog.csdn.net/u013948190/article/details/46953683
