티스토리 뷰

반응형
예전에 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  


반응형

'XML Developer > HTML5' 카테고리의 다른 글

아이폰용 Web App을 만들기 위한 HTML5 요소들  (0) 2012.02.23
HTML5를 활용한 블로그 BGM (?) 테스트~  (0) 2011.12.02
HTML5 audio 태그  (0) 2011.02.16
HTML5 video 태그  (2) 2011.02.02
HTML5에 추가된 요소들  (2) 2011.01.20
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함