W3Schools HTML5 튜토리얼 (한글) -5

W3Schools HTML5 튜토리얼

HTML5 홈
HTML5 소개
HTML5 새 엘리먼트 (Elements)
HTML5 비디오 (Video)
HTML5 비디오/Dom (Video/DOM)
HTML5 오디오 (Audio)
HTML5 캔버스 (Canvas)
HTML5 웹 저장공간 (Web Storage)

HTML5 폼 (Forms)

HTML5 입력타입 (Input Types)
HTML5 폼 엘리먼트 (Form Elements)
HTML5 폼 속성 (Form Attributes)

HTML5 참조목록 (Reference)

HTML5 태그 (Tags)
HTML5 속성 (Attributes)
HTML5 이벤트 (Events)
HTML5 2D 캔버스 (Canvas 2d)
HTML 유효 DTD (Valid DTDs)

---

HTML5 <video> - DOM으로 제어하기

The HTML5 <video> 엘리먼트도 메소드와, 프로퍼티와 이벤트를 가지고 있습니다.

예를 들면 메소드는 재생, 일시정지, 로딩을 위해 쓰이고, 프로퍼티는 기간, 볼륨, 찾기설정 등을 읽거나 설정하며

DOM 이벤트는 <video> 엘리먼트가 재생을 시작했다던가, 일시정지나 종료되었을때 등등을 당신에게 알려줄수 있습니다.

간단한 예제를 통해 어떻게 <video> 엘리먼트가 프로퍼티를 읽고 쓰고 메소드를 호출하는지 알아봅시다.
 

예제 1

비디오에 간단한 재생/일시정지 + 리사이즈 제어를 해봅시다:

빅 벅 버니 (Big Buck Bunny)의 영상을 일부 발췌하였습니다

위의 예제는  play() 와  pause() 두 메소드를 호출하였으며 paused, height, videoHeight의 세 프로퍼티가 사용되었습니다.

직접 해보기 »

---

HTML5 <video> - 메소드, 프로퍼티, 이벤트

다음 테이블은 대부분의 브라우저에서 지원하는 비디오 메소드, 프로퍼티 와 이벤트의 목록입니다:

메소드 (Methods)	프로퍼티 (Properties)	이벤트 (Events)
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

Note: 비디오 프로퍼티중 videoWidth 와 videoHeight 이 두개만 바로 사용가능합니다. 다른 프로퍼티들은 비디오 메타데이터가 로딩된 후에 사용가능해집니다.