video
Through the
<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 method:
<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
The new element tag
<audio src="elvis.ogg" controls autobuffer></audio>
This code can work normally in Firefox 3.5 and Chrome 3. For Safari 4, the mp3 file must be replaced with an audio file in ogg format. However, given that the W3C's HTML5 definition specification has not been finalized, these format restrictions may change in the future.
According to the definition specifications, the following API methods can be used:
play(): play audio
pause(): pause playback
canPlayType(): Commands the browser to determine whether the current audio file can be played
buffered(): Sets the start and end time points of the buffered part of the file.
In addition, we can use the
<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中文网(www.php.cn)!