>웹 프론트엔드 >H5 튜토리얼 >HTML5 연구 노트의 간결한 버전(4): 새로운 요소: 미터, 데이터 목록, 키 생성, 출력

HTML5 연구 노트의 간결한 버전(4): 새로운 요소: 미터, 데이터 목록, 키 생성, 출력

黄舟
黄舟원래의
2017-01-21 16:37:201758검색

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[&#39;sum&#39;] !== &#39;undefined&#39; ) {
        f.addEventListener(&#39;submit&#39;, function(e) {
            f[&#39;sum&#39;].value = 15;
            e.preventDefault();
        }, false);
    } else {
        alert(&#39;你的浏览器尚未准备好!&#39;);
    }
})();
</script>

以上就是HTML5学习笔记简明版(4):新元素之meter,datalist,keygen,output的内容,更多相关内容请关注PHP中文网(www.php.cn)!


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.