HTML5 연구 노트의 간결한 버전(4): 새로운 요소: 미터, 데이터 목록, 키 생성, 출력
- 黄舟원래의
- 2017-01-21 16:37:201774검색
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>
49c6123c49c6be380cb91db06cd3bfa9标签中的内容可以不包含任何数字，这时最大值会被认为是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
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）！