1. html5
  2. html5/VA
  3. html5/canvas
  4. html5/drag-and-drop
  5. html5/form
  6. html5/geolocation
  7. html5/offline-web-application
  8. html5/others-api
  9. html5/outline
  10. html5/overview
  11. html5/richtext-edit
  12. html5/video&audio
  13. html5/web-storage
  14. html5/web-workers
  15. html5/webSqlDatabase
  16. html5/websocket
  17. html5/문제점
  18. html5practice/roundRect
  19. html5practice/즐겨찾기목록만들기



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로 처리
  • 사용자 중심의 편리한 미디어 플레이어를 만들수 있다.

7. 미디어 요소와 API


Retrieved from http://wiki.zeropage.org/wiki.php/html5/VA
last modified 2021-02-07 05:31:40