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 の場合、mp3 ファイルを ogg 形式のオーディオ ファイルに置き換える必要があります。ただし、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元素标签用来表示范围已知且可度量的等级标量或分数值,如磁盘使用量比例、关键词匹配程度等。需要注意的是,
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中文网(www.php.cn)!