HTML video 태그의 DOM 지원~

예전에 HTML <video> 태그에 대해서 정리했었는데요. 
오늘 살펴보니 DOM을 활용해서 제어할 수 있는 기능이 추가되어 있네요.

즉, 동영상 내에 재생, 중지 등의 버튼이 포함되는 것 뿐만 아니라
HTML 내에 있는 버튼을 통해서 동영상을 제어할 수 있도록 Methods, Properties, 그리고 Events가 제공되고 있습니다. 

다음 예제를 살펴보시면 재생과 정지를 하는 버튼과
속성(Property)를 변경해서 동영상 크기를 제어하는 것을 알 수 있습니다.
HTML5에서 항상 그렇듯 지원하는 브라우저에서만 제대로 보입니다. ㅠㅠ

Example 1

Video courtesy of Big Buck Bunny.

테스트해보세요 »

메소드(Methods)는 재생, 정지, 로딩과 같은 것들이 있구요. 
속성(Properties)는 볼륨조절, 크기조절과 같은 값들을 읽고 쓸 수 있도록 되어 있습니다. 
또한 동영상이 재생되거나 정지되거나 끝날때 발생하는 이벤트도 있습니다.

속성들 중에서 동영상 재생 중 변경할 수 있는 값으로는 위 예제와 같이 크기를 조절하는 videoWidth, videoHeight만 있는 것 같습니다. 
나머지 속성들은 처음 로딩되었을 때만 설정할 수 있는 듯 하네요. 

이러한 것들을 정리하면 다음과 같습니다. 

HTML5 <video> - Methods, Properties, and Events

The table below lists the video methods, properties, and events supported by most browsers:

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