html5/VA

Difference between r1.1 and the current

@@ -6,3 +6,40 @@

* HTML5를 지원하는 브라우저에서 사용할 수 있다.

== 사용 방법 ==

* {{{

}}}

* HTML안에 태그를 삽입만 하면 된다.

* loop, controls, autoplay 등을 통해 재생 속성을 설정할 수 있다.

== Video 고유 특성 ==

* width 와 height 로 재생 영역을 지정할 수 있다.

* poster 로 동영상을 재생할 수 있을때까지 표시할 이미지 URL을 지정할 수 있다.

== source 요소 ==

* source 요소에 속성들을 지정하여 미디어 데이터의 출력을 원활하게 한다.

* type 속성 지정을 통해 재생할 수 있는 미디어 데이터인지를 다운로드하지 않고도 판단한다.

== JavaScript로 video/audio 요소 제어 ==

* 단순 재생뿐만아니라 JavaScript를 이용하여 정밀 제어

* 재생, 일시 정지, 재생 속도 변경, 재생 위치 변경 등

*JavaScript API

* src - src 속성값 대응

* currentSrc - 실제로 읽어들여 재생 중인 미디어 데이터의 URL

* currentTime - 현재 재생 위치

* startTime - 재생할 위치

* duration - 미디어 데이터의 길이

* playbackRate - 재생 속도(기본값 1.0)

* volume - 음량 표시 (0.0~1.0)

* load() - 동영상을 다시 읽음

* play() - 동영상 재생

* pause() - 동영상 일시정지

== 이벤트 처리 ==

* 미디어 데이터를 읽거나 재생할때 발생하는 이벤트를 JavaScript로 처리

* 사용자 중심의 편리한 미디어 플레이어를 만들수 있다.

== 미디어 요소와 API ==

1. Video & Audio ¶

외부 플러그인 필요없이 동영상, 오디오 재생가능
HTML5를 지원하는 브라우저에서 사용할 수 있다.

2. 사용 방법 ¶

<video src = "http://example.com/video1.mov"></video>
<audio src = "http://example.com/audio1.wav"></audio>

HTML안에 태그를 삽입만 하면 된다.
loop, controls, autoplay 등을 통해 재생 속성을 설정할 수 있다.

3. Video 고유 특성 ¶

width 와 height 로 재생 영역을 지정할 수 있다.
poster 로 동영상을 재생할 수 있을때까지 표시할 이미지 URL을 지정할 수 있다.

4. source 요소 ¶

source 요소에 속성들을 지정하여 미디어 데이터의 출력을 원활하게 한다.
type 속성 지정을 통해 재생할 수 있는 미디어 데이터인지를 다운로드하지 않고도 판단한다.

5. JavaScript로 video/audio 요소 제어 ¶

단순 재생뿐만아니라 JavaScript를 이용하여 정밀 제어
- 재생, 일시 정지, 재생 속도 변경, 재생 위치 변경 등
JavaScript API
- src - src 속성값 대응
- currentSrc - 실제로 읽어들여 재생 중인 미디어 데이터의 URL
- currentTime - 현재 재생 위치
- startTime - 재생할 위치
- duration - 미디어 데이터의 길이
- playbackRate - 재생 속도(기본값 1.0)
- volume - 음량 표시 (0.0~1.0)
- load() - 동영상을 다시 읽음
- play() - 동영상 재생
- pause() - 동영상 일시정지

6. 이벤트 처리 ¶

미디어 데이터를 읽거나 재생할때 발생하는 이벤트를 JavaScript로 처리
사용자 중심의 편리한 미디어 플레이어를 만들수 있다.