Xiaoqiang의 HTML5 모바일 개발 길(12) - 멀티미디어 태그에서 시작-H5 튜토리얼-php.cn

1. 동영상 재생

<html>  
    <head>  
        <title>多媒体播放</title>  
    </head>  
    <body>  
        <embed src="http://demo.inwebson.com/html5-video/iceage4.mp4">  
    </body>  
</html>

로그인 후 복사

효과는 다음과 같습니다.

Xiaoqiang의 HTML5 모바일 개발 길(12) - 멀티미디어 태그에서 시작

속성

HTML5의 새로운 속성.

속성 값 설명

height 픽셀 삽입된 콘텐츠의 높이를 설정합니다.

src url 삽입된 콘텐츠의 URL입니다.

유형 유형은 삽입된 콘텐츠의 유형을 정의합니다.

너비 픽셀 삽입된 콘텐츠의 너비를 설정합니다.

태그는 HTML5의 전역 속성과 HTML5의 이벤트 속성을 지원합니다.

너비 속성을 추가해 보겠습니다.

<embed src="http://demo.inwebson.com/html5-video/iceage4.mp4" width="100px"/>

로그인 후 복사

Xiaoqiang의 HTML5 모바일 개발 길(12) - 멀티미디어 태그에서 시작

type 속성은 삽입된 콘텐츠의 MIME 유형을 지정합니다.

IANA MIME 유형을 참조하세요.

예:

<!DOCTYPE html>  
<html>  
<body>  
  
<embed src="/i/helloworld.swf" type="application/x-shockwave-flash" />  
  
</body>  
</html>

로그인 후 복사

2.IANA MIME

다목적 인터넷 메일 확장자 유형은 특정 확장자를 가진 파일을 응용 프로그램에서 열도록 설정한 유형입니다. 지정된 응용 프로그램을 사용하여 엽니다. 주로 일부 클라이언트 정의 파일 이름과 일부 미디어 파일 열기 방법을 지정하는 데 사용됩니다.

각 MIME 유형은 두 부분으로 구성됩니다. 첫 번째 부분은 사운드 오디오, 이미지 등 데이터의 큰 범주이고 두 번째 부분은 특정 유형을 정의합니다.

일반적인 MIME 유형(범용):

하이퍼텍스트 마크업 언어 text.html text/html

xml document.xml text/xml

XHTML 문서. xhtml 애플리케이션/xhtml+xml

일반 text.txt 텍스트/일반

RTF text.rtf 애플리케이션/rtf

PDF 문서 .pdf 애플리케이션/pdf

Microsoft Word 파일 .word 애플리케이션/msword

PNG image.png 이미지/png

GIF graphic.gif 이미지/gif

JPEG graphic.jpeg,. jpeg

au 사운드 파일 .au audio/basic

MIDI 음악 파일 mid,.midi audio/midi,audio/x-midi

RealAudio 음악 파일. ram audio/x-pn-realaudio

MPEG 파일 .mpg, .mpeg video/mpeg

AVI 파일 .avi video/x-msvideo

GZIP 파일 .gz 애플리케이션 /x-gzip

TAR 파일 .tar 애플리케이션/x-tar

임의 바이너리 데이터 애플리케이션/octet-stream

3. HTML5 소개

Html5는 HTML, XHTML 및 HTML DOM의 새로운 표준이 될 것입니다.

HTML의 마지막 버전은 1999년에 만들어졌습니다. 그 이후로 웹의 세계는 극적으로 변했습니다.

HTML5는 아직 진행 중인 작업입니다. 그러나 대부분의 최신 브라우저에는 이미 HTML5가 일부 지원되어 있습니다.

HTML5는 W3C와 WHATWG 간의 협력의 결과입니다.

——W3C는 월드와이드웹컨소시엄(World Wide Web Consortium), 월드와이드웹컨소시엄(World Wide Web Consortium)을 말한다.

- WHATWG는 웹 하이퍼텍스트 응용 기술 워킹 그룹(Web Hypertext Application Technology Working Group)을 의미합니다.

WHATWG는 웹 양식과 애플리케이션을 다루는 반면, W3C는 XHTML 2.0에 중점을 두고 있습니다. 2006년에 두 당사자는 새로운 버전의 HTML을 만들기 위해 협력하기로 결정했습니다.

HTML5에 설정된 일부 규칙:

새로운 기능은 HTML, CSS, DOM 및 JavaScript를 기반으로 해야 합니다.
외부 플러그인(Flash 등)의 필요성 감소 - 많은 강력한 멀티미디어 태그 내장
더 나은 오류 처리
스크립트를 대체할 추가 마크업
HTML5는 기기 독립적이어야 하며 PC와 모바일 기기에서 완벽하게 실행됩니다
개발 프로세스는 대중에게 투명해야 합니다

HTML5의 몇 가지 흥미로운 새 기능:

그림을 위한 캔버스 요소
미디어 재생을 위한 비디오 및 오디오 요소
로컬 오프라인 저장소에 대한 더 나은 지원
새로운 특수 콘텐츠 요소, 기사, 바닥글, 머리글, 탐색, 섹션 등
달력, 날짜, 시간, 이메일, URL, 검색 등의 새로운 양식 컨트롤

HTML5에 대한 자세한 내용은 내 블로그 주제인 http://blog.csdn.net/column/details/dawanganban-html5.html을 참조하세요.

Safari, Chrome, Firefox의 최신 버전, Opera는 특정 HTML5 기능을 지원합니다. Internet Explorer 9은 특정 HTML5 기능을 지원합니다.

4. HTML5의 전역 속성

다음 전역 속성은 모든 HTML5 요소에 사용할 수 있습니다

속성

설명

accesskey는 요소에 액세스하기 위한 키보드 단축키를 지정합니다.

class는 요소의 클래스 이름을 지정합니다(스타일 시트에서 클래스를 지정하는 데 사용됨). ).

contenteditable은 사용자가 콘텐츠를 편집할 수 있는지 여부를 지정합니다.

contextmenu 요소의 컨텍스트 메뉴를 지정합니다.

dir은 요소 내용의 텍스트 방향을 지정합니다.

draggable 사용자가 요소를 드래그할 수 있는지 여부를 지정합니다.

dropzone 드래그한 항목/데이터를 요소에 드롭할 때 발생하는 상황을 지정합니다.

hidden은 요소가 관련이 없음을 지정합니다. 숨겨진 요소는 표시되지 않습니다.

id는 요소의 고유 ID를 지정합니다.

lang은 요소에 있는 콘텐츠의 언어 코드를 지정합니다.

spellcheck 요소의 철자 또는 문법을 검사해야 하는지 여부를 지정합니다.

style은 요소의 인라인 스타일을 지정합니다.

tabindex는 요소의 탭 키 제어 순서를 지정합니다.

title은 요소에 대한 추가 정보를 지정합니다.

5. 전역 이벤트 속성

HTML 4는 이벤트를 통해 브라우저에서 동작을 트리거하는 기능을 추가합니다. 사용자가 요소를 클릭하면 JavaScript 조각이 시작됩니다.

다음 표에는 이벤트 동작을 정의하기 위해 HTML 5 요소에 삽입할 수 있는 표준 이벤트 속성이 나열되어 있습니다.

창 이벤트 속성

창 개체에 의해 발생되는 이벤트입니다.

태그에 적용 가능: 표시된 색상은 새 태그(html5)입니다.

속성

값

설명

onafterprint 스크립트 문서가 인쇄된 후 스크립트 실행

onbeforeprint 스크립트 문서가 인쇄되기 전 스크립트 실행

onbeforeonload 스크립트 스크립트 실행 문서가 로드되기 전

onblur 스크립트 창이 포커스를 잃을 때 스크립트 실행

onerror 스크립트 오류가 발생할 때 스크립트 실행

onfocus 스크립트 창이 포커스를 얻을 때 스크립트 실행

onhaschange 스크립트 문서 변경 시 스크립트 실행

onload 스크립트 문서 로드 시 스크립트 실행

onmessage 스크립트 메시지가 트리거될 때 스크립트 실행

onoffline 스크립트 문서가 오프라인일 때 스크립트 실행

ononline script 문서가 온라인일 때 스크립트 실행

onpagehide script 창이 숨겨져 있을 때 스크립트 실행

onpageshow script 창이 보일 때 스크립트 실행

onpopstate 스크립트 창이 표시될 때 기록이 변경될 때 스크립트 실행

onredo 스크립트 문서가 재실행 작업(redo)을 수행할 때 스크립트 실행

onresize 스크립트 창 크기가 조정될 때 스크립트 실행

onstorage script 문서 로딩 시 스크립트 실행

onundo script Web Storage 영역이 업데이트될 때(저장 공간의 데이터가 변경될 때)

onunload script 사용자가 문서를 떠날 때 스크립트를 실행합니다.

양식 이벤트

HTML 양식 내의 작업에 의해 트리거되는 이벤트입니다.

은 모든 HTML 5 요소에 적용되지만 양식 요소에서 가장 일반적으로 사용됩니다.

속성

값

설명

onblur 스크립트 요소가 포커스를 잃을 때 스크립트 실행

onchange 스크립트 요소가 변경될 때 스크립트 실행

oncontextmenu 스크립트 컨텍스트 메뉴가 트리거될 때 스크립트 실행

onfocus 스크립트 요소에 포커스가 있을 때 스크립트 실행

onformchange 스크립트 양식이 변경될 때 스크립트 실행

onforminput 스크립트 양식에 사용자 입력이 있을 때 스크립트 실행

oninput script 요소가 사용자 입력을 받을 때 스크립트를 실행

oninvalid script 요소가 유효하지 않을 때 스크립트를 실행

onreset script 양식이 재설정될 때 스크립트를 실행합니다. HTML 5는 지원되지 않습니다.

onselect 스크립트 요소 선택 시 스크립트 실행

onsubmit 스크립트 양식 제출 시 스크립트 실행

키보드 이벤트

에 의해 트리거되는 이벤트 건반.

모든 HTML 5 요소에 적용됩니다:

속성

값

설명

onkeydown 스크립트 키를 눌렀을 때 스크립트 실행

onkeypress 스크립트 키를 눌렀다가 놓을 때 스크립트 실행

onkeyup 스크립트 키를 놓았을 때 스크립트 실행

마우스 이벤트

마우스 또는 유사한 사용자 동작에 의해 트리거되는 이벤트입니다.

모든 HTML 5 요소에 적용됩니다:

속성

값

설명

onclick script 마우스 클릭 시 스크립트 실행

ondblclick script 마우스 더블 클릭 시 스크립트 실행

ondrag script 요소 드래그 시 스크립트 실행

ondragend 스크립트 드래그 작업이 끝나면 스크립트 실행

ondragenter 스크립트 요소가 유효한 드래그 앤 드롭 대상으로 드래그될 때 스크립트 실행

ondragleave 스크립트 스크립트 실행 요소가 유효한 드래그 앤 드롭 대상을 벗어날 때

ondragover 스크립트 요소가 유효한 드래그 앤 드롭 대상 위로 드래그될 때 실행되는 스크립트

ondragstart 스크립트 드래그 작업이 시작될 때 실행되는 스크립트

ondrop 스크립트 드래그한 요소를 드래그하는 동안 마우스 버튼을 눌렀을 때 스크립트 실행

onmousedown 스크립트 마우스 버튼을 눌렀을 때 스크립트 실행

onmousemove 스크립트 실행 마우스 포인터가 움직일 때 스크립트

onmouseout 스크립트 마우스 포인터가 요소 밖으로 움직일 때 실행 스크립트

onmouseover 스크립트 마우스 포인터가 요소 위로 움직일 때 스크립트를 실행

onmouseup 스크립트 마우스 버튼을 놓았을 때 스크립트 실행

onmousewheel 스크립트 마우스 휠을 돌렸을 때 실행 스크립트

onscroll 스크립트 요소의 스크롤 막대를 스크롤할 때 스크립트 실행

미디어 이벤트

영상, 이미지, 오디오 등 미디어를 통해 발생하는 이벤트입니다.

은 모든 HTML 5 요소에 적용되지만 미디어 요소(예: audio, embed, img, object 및 video)에서 가장 일반적으로 사용됩니다.

속성

값

설명

onabort script 중단 이벤트 발생 시 스크립트 실행

oncanplay script 미디어가 재생을 시작할 수 있는 경우 하지만 버퍼링으로 인해 필요할 수 있음 중지 시 스크립트 실행

oncanplaythrough script 버퍼링으로 인해 미디어를 멈추지 않고 끝까지 재생할 수 있을 때 스크립트 실행

ondurationchange script 미디어 길이가 변경될 때 스크립트 실행

onemptied script 미디어 리소스 요소가 갑자기 비어 있을 때 실행되는 스크립트(네트워크 오류, 로딩 오류 등)

onended 미디어의 끝에 도달했을 때 실행되는 스크립트

onerror 스크립트 요소 로딩 중 오류가 발생한 경우

onloadeddata 스크립트

onloadedmetadata 스크립트 미디어 요소 및 기타 미디어 데이터의 지속 시간이 초과될 때 스크립트 실행

onloadstart script when 브라우저가 미디어 데이터 로딩을 시작할 때 스크립트 실행

onpause 스크립트 미디어 데이터가 일시 중지되었을 때 스크립트 실행

onplay 스크립트 스크립트 실행 미디어 데이터가 재생을 시작하려고 할 때

onplaying script when 미디어 데이터가 재생을 시작할 때 스크립트를 실행합니다.

브라우저가 미디어 데이터를 가져올 때 스크립트를 실행합니다.

onratechange 스크립트. 미디어 데이터의 재생 속도가 변경될 때 스크립트를 실행합니다.

onreadystatechange 스크립트 준비 상태가 변경될 때 스크립트를 실행합니다.

onseeking 스크립트 위치 지정 시 스크립트를 실행합니다. 미디어 요소의 [1] 속성이 더 이상 true가 아니며 위치 지정이 종료되었습니다.

검색 스크립트 미디어 요소의 위치 지정 속성이 true이고 위치 지정이 시작된 경우 스크립트를 실행합니다.

. 미디어 데이터를 검색하는 데 오류가 있을 때 스크립트를 실행합니다.

브라우저가 미디어 데이터를 검색할 때 스크립트를 실행하지만 전체 미디어 파일을 검색하기 전에 중지합니다.

ontimeupdate 스크립트 미디어 재생 위치가 변경될 때 스크립트 실행

onvolumechange 스크립트 미디어가 볼륨을 변경하거나 볼륨이 음소거로 설정된 경우 스크립트 실행

대기 스크립트 미디어가 실행될 때 스크립트 실행 재생을 중단했지만 계속 재생하려고 합니다

다음 글에서는 글로벌 속성과 이벤트의 사용법을 자세히 소개하겠습니다

위는 Xiaoqiang의 HTML5 모바일 개발 길입니다(12) - 멀티미디어 태그부터 시작해서 더 많은 관련 내용을 주목해주세요 PHP 중국어 홈페이지(www.php.cn)!