video
39000f942b2545a5315c57fa3276f220 태그를 통해 최근 인기가 별로 없었던 플래시를 버리고, 페이지에서 직접 동영상 파일을 재생할 수 있습니다. 비디오 파일은 당연히 가장 의미 있는 파일 형식이지만 이 요소 태그는 오디오와 이미지도 지원합니다.
과거(그리고 현재)에는 일반적으로 페이지에 동영상을 배치하기 위해 다음과 같은 번거롭고 보기 흉한 코드를 사용해야 하지만, 이 방법을 사용하려면 브라우저에 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>
39000f942b2545a5315c57fa3276f220 태그에는 다음과 같은 공통 속성이 있습니다.
자동 재생: 페이지가 재생된 후 동영상을 자동으로 재생할지 여부를 설정하는 데 사용됩니다. 짐을 실은.
Src: 동영상의 파일 링크 또는 다운로드 경로를 지정합니다. 브라우저가 39000f942b2545a5315c57fa3276f220 태그를 지원하지 않거나 일부 재생 오류가 발생하는 경우 다운로드를 위해 사용자에게 제공될 수 있습니다.
자동 버퍼: 동영상을 자동으로 버퍼링할지 여부를 설정하는 데 사용됩니다. 설정된 경우 사용자가 재생 버튼을 클릭하면 동영상이 자동으로 다운로드되어 버퍼링됩니다. 기다리지 않고 바로 시청할 수 있습니다.
포스터: 동영상의 배경 이미지를 '사진 프레임 기본 이미지'로 설정하는 데 사용됩니다. 동영상을 정상적으로 로드하고 재생할 수 없는 경우 사용자에게 표시할 수 있습니다.
컨트롤: "재생", "일시 중지" 등과 같은 컨트롤 바를 비디오에 추가할지 여부를 설정하는 데 사용됩니다. 컨트롤 바의 모양을 사용자 정의할 수 있습니다.
반복: 동영상의 반복 재생 여부를 설정하는 데 사용됩니다.
너비, 높이: 영상의 너비와 높이를 조절하는데 사용됩니다.
39000f942b2545a5315c57fa3276f220 요소가 많은 주목을 받았고 큰 잠재력을 갖고 있지만, 39000f942b2545a5315c57fa3276f220를 반드시 사용해야 한다면 현재 주류 브라우저에서 완전히 지원되기까지는 시간이 좀 걸릴 것입니다. ; 태그의 경우 다음과 같은 설명이 없는 코드 조합을 사용할 수 있습니다.
<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의 새로운 요소 태그 b97864c2e0ef2353a16c4d64c7734e92는 오랫동안 기다려온 기능입니다. 현재 b97864c2e0ef2353a16c4d64c7734e92 요소를 지원하는 브라우저에는 Safari 4, Firefox 3.5 및 Chrome 3이 포함되어 있습니다.
b97864c2e0ef2353a16c4d64c7734e92 요소 태그의 몇 가지 일반적인 속성:
src: 오디오 파일 경로.
autobuffer: 페이지가 로드될 때 오디오를 자동으로 버퍼링할지 여부를 설정합니다.
자동 재생: 오디오 자동 재생 여부를 설정합니다.
loop: 오디오를 반복 재생할지 여부를 설정합니다.
컨트롤: 재생 제어판 표시 여부를 설정합니다.
이러한 속성은 39000f942b2545a5315c57fa3276f220 요소 태그의 속성과 매우 유사하다는 것을 알 수 있습니다. 코드 예를 살펴보겠습니다.
<audio src="elvis.ogg" controls autobuffer></audio>
이 코드는 Firefox 3.5 및 Chrome 3에서 정상적으로 작동합니다. Safari 4의 경우 mp3 파일을 ogg 형식의 오디오 파일로 바꿔야 합니다. 그러나 W3C의 HTML5 정의 사양이 확정되지 않았으므로 이러한 형식 제한은 향후 변경될 수 있습니다.
정의 사양에 따라 다음 API 메서드를 사용할 수 있습니다.
play(): 오디오 재생
pause(): 재생 일시 중지
canPlayType (): 현재 오디오 파일을 재생할 수 있는지 여부를 브라우저에 명령합니다.
buffered(): 파일 중 버퍼링된 부분의 시작 및 종료 시점을 설정합니다.
또한 e02da388656c3265154666b7c71a8ddc 요소 태그를 사용하여 b97864c2e0ef2353a16c4d64c7734e92를 사용하여 현재 브라우저가 첫 번째 파일을 지원하지 않는 경우 0fd4398f488890dd90846aa3879b44bc는 다음 e02da388656c3265154666b7c71a8ddc에 지정된 파일을 자동으로 재생하려고 시도하며, 다음과 같이 Flash Player를 로드하기 위해 기존의 d8e2720730be5ddc9c2a3782839e8eb6 코드를 추가할 수도 있습니다.
미터
meter元素标签用来表示范围已知且可度量的等级标量或分数值,如磁盘使用量比例、关键词匹配程度等。需要注意的是,49c6123c49c6be380cb91db06cd3bfa9不可以用来表示那些没有已知范围的任意值,例如重量、高度,除非已经设定了它们值的范围。49c6123c49c6be380cb91db06cd3bfa9元素共有6个属性:
Value:表示当前标量的实际值;如果不做指定,那么49c6123c49c6be380cb91db06cd3bfa9标签中的第一个数字就会被认为是其当前实际值,例如49c6123c49c6be380cb91db06cd3bfa92 out of 106fd20bd7b615c56cbd536dc339c52b20中的“2”;如果标签内没有数字,那么标量的实际值就是0。
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>这时49c6123c49c6be380cb91db06cd3bfa9的最大值会被认为是100%或1。
<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
aa983b9eb8086376f1f6481364a02e5a 标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。
<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>
output
be6d67dae90cc1ad6469079e163d0939 标签定义不同类型的输出,比如脚本的输出。例如:
<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)!