video
透過
<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 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>audio
HTML5中的新元素標籤
<audio src="elvis.ogg" controls autobuffer></audio>
這段程式碼可以在Firefox 3.5和Chrome 3中正常運作，對於Safari 4來說要使用ogg格式的音訊檔案替換掉mp3檔。不過，鑑於W3C的HTML5定義規範並沒有最終完成，這些格式限制也許在未來會有所改變。
根據定義規範，以下幾種API方法是可以使用的：
play()：播放音訊
pause()：暫停播放
canPlayType()：命令瀏覽器判斷目前音訊檔案是否可以被播放
buffered()：設定檔案需要緩衝部分的開始與結束時間點。
另外，我們可以使用
<audio controls autobuffer> <source src="elvis.ogg" /> <source src="elvis.mp3" /> <!-- now include flash fall back --> </audio>
meter
meter元素标签用来表示范围已知且可度量的等级标量或分数值，如磁盘使用量比例、关键词匹配程度等。需要注意的是，
Value：表示当前标量的实际值；如果不做指定，那么
Min：当前标量的最小值；如不做指定则为0。
Max：当前标量的最大值；如不做指定则为1；如果指定的最大值小于最小值，那么最小值会被认为是最大值。
Low：当前标量的低值区；必须小于或等于标量的高值区数字；如果低值区数字小于标量最小值，那么它会被认为是最小值。
High：当前标量的高值区。
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>
<p>Christmas is in <meter value ="30" min="1" max="366" title="days">30 days!</p>
<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
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>以上就是HTML5学习笔记简明版（4）：新元素之meter,datalist,keygen,output的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！
