Programing/HTML5

HTML5 Video - DOM 속성 및 이벤트.

Dongkkase 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 > HTML5' 카테고리의 다른 글

HTML5 mobile meta 태그  (0) 2011.01.11