Programing/HTML

HTML5 Video - DOM 속성 및 이벤트.

2012. 1. 26. 02:42
반응형
모바일에서 동영상 재생 서비스 부분을 만들고 있는데 쉽지가 않네요 ^^;;
여러가지 걸리는 문제점도 있고, 플랫폼에 따라 지원여부도 틀려지고 ㅠ
아래는 프로젝트 진행도중 자료를 찾다 유용하게 사용한 부분들을 정리하였습니다.
더 많은 정보는 http://dev.opera.com/articles/view/introduction-html5-video/ 여기를 통해 확인 할 수 있습니다.

(*) 으로 표시 된 속성은 파폭에서 지원 하지 않습니다.

Display attributes
src (string): 소스파일 (경로 포함)
poster (URL): 동영상에 표시될 이미지.
controls (boolean): 브라우저에 의한 제어?
videoWidth, videoHeight (integer): 동영상의 가로, 세로 크기.

PlayBack attributes
CurrentTime (float): 재생 시간.
startTime* (float): 재생 시작 시간. (동영상이 0.0에서 시작되지 않는 경우, 예를 들어 스트림)
duration (float): 초, 기간.
paused (boolean): 비디오 일시정지.(ios에선 pause이며 일시정지 버튼 뿐만 아니라, "Done", "완료" 버튼을 누를때도 같은 이벤트로 적용된다.)
ended (boolean): 동영상 종료
autoplay (boolean): 동영상 자동재생.
loop (boolean): 동영상 반복 재생.
autobuffer (boolean): 브라우저가 로딩되면 바로 버퍼링 시작할 것인지.
seeking (boolean): 비디오를 지원하는 브라우저인지.
defaultPlaybackRate* (float): 동영상 재생 속도.
playbackRate* (float): 동영상 현재 재생 속도 (1.0은 기복속도, 2.0은 2배속. -3.0은 뒤로)
seekable* (TimeRanges): 이 부분에 대해 아시는 분은 댓글 부탁드립니다.
buffered* (TimeRanges):이 부분에 대해 아시는 분은 댓글 부탁드립니다.
played* (TimeRanges): 이 부분에 대해 아시는 분은 댓글 부탁드립니다.

Other attributes
volume (float): 현재 볼륨 (0.0에서 1.0)
mute (boolean): 음소거 여부
readyState (int): 비디오 상태
networkState (int): 네트워크 상태.
error (MediaError): 미디어 오류. (객체가 오류 났을 경우).

속성사용
var player = document.getElementById("VideoTagID");
player.muted = false;
player.currentTime = 0.0;

Error codes 
MEDIA_ERR_ABORTED (1) 사용자에 의해 중단된 비디오 재생.
MEDIA_ERR_NETWORK (2) 네트워크 에러.
MEDIA_ERR_DECODE (3) 디코딩 에러(비디오 에러이거나 코덱 문제.)
MEDIA_ERR__SRC_NOT_SUPPORTED (4) 형식지원하지 않음.

var player = document.getElementById("VideoTagID");
if (player.error)
{
    switch (player.error.code)
    {
        case MEDIA_ERR_NETWORK:
            // Do Nothine..
            break;
    }
}








 
반응형
저작자표시 비영리 동일조건 (새창열림)

'Programing > HTML' 카테고리의 다른 글

HTML <input> 시간 관련 타입 완전 정복: time, month, week, date, datetime-local  (2) 2025.04.26
🔤 HTML 특수 문자(Entity) 정리 가이드  (0) 2025.04.18
🌐 메타 태그(meta tag) 종류와 사용법 정리  (0) 2025.04.18
HTML5 mobile meta 태그  (0) 2011.01.11
table border  (0) 2010.04.07
html target 옵션  (0) 2009.12.29
페이지 로딩중(로딩바) 표시  (0) 2009.11.26
메모  (0) 2009.06.01
'Programing/HTML' 카테고리의 다른 글
  • 🔤 HTML 특수 문자(Entity) 정리 가이드
  • 🌐 메타 태그(meta tag) 종류와 사용법 정리
  • HTML5 mobile meta 태그
  • table border
Dongkkase
Dongkkase
개발자로 일하면서 부딪히는 문제풀이가 누군가에게 도움이 되길 바라며
    반응형
  • Dongkkase
    정집사의 개발로그
    Dongkkase
  • 전체
    오늘
    어제
    • All (478)
      • 금융 (61)
      • Programing (295)
        • Algorithm (39)
        • API (2)
        • javascript (122)
        • CSS (8)
        • HTML (10)
        • PHP (15)
        • JAVA (27)
        • JSP (17)
        • JSP 예제 (1)
        • IOS (1)
        • Android (1)
        • Sencha Touche (1)
        • bat file, cmd (0)
        • 디버깅 (2)
        • SQL (21)
        • MS-SQL (1)
        • MySQL (13)
        • 보안 (5)
      • Server (14)
        • Docker (1)
        • Windows (9)
        • Linux (3)
        • jeus (1)
      • Database (6)
      • IT 일반 (15)
      • 리뷰 (38)
        • Book (17)
        • 제품 (2)
        • 영화 소개 (11)
        • 음악 소개 (7)
      • 잡생각 (36)
        • 회고 (3)
        • 컬럼 (4)
        • 자료실 (6)
        • 낙서장 (12)
        • 위시리스트 (2)
        • WOW (1)
        • 덕 (1)
  • 인기 글

  • 최근 댓글

  • 태그

    읽고 싶은 책
    IT·컴퓨터
    js패턴
    iT's MY LiFE
    SQL
    jsp
    디자인패턴
    IT블로그
    사고 싶은 책
    위시리스트
    It
    자바스크립트
    자바스크립트유틸
    블로그
    php
    기초
    IT 관련
    자바
    Java
    JavaScript
Dongkkase
HTML5 Video - DOM 속성 및 이벤트.
상단으로

티스토리툴바