[HTML5] Audio & Video

Audio & Video

미디어 재생 API 정리

- 속성

src	src 속성 값
currentSrc	실제로 읽어 들여 재생 중인 미디어 데이터의 URL
currentTime	현재 재생 위치(시간)
startTime	재생할 위치(시간)
duration	미디어 데이터의 길이(시간)
paused	일시 정시 상태 여부를 반환
defaultPlaybackRate	기본 재생 속도, 기본 값은 1.0
playbackRate	재생 속도, 기본 값은 1.0, -일 경우 역재생
ended	재생 종료 여부를 반환
muted	음소거 여부를 반환
volume	음량(0.0~1.0)

- 함수

load()	동영상을 다시 읽어 들임
play()	동영상을 재생
pause()	재생 중인 동영상을 일시 정지

사용예 JavaScript)

window.onload = function(){

var rewindBtn = document.getElementById("rewind");

var fastforwardBtn = document.getElementById("fastforward");

var playTime = document.getElementById("status");

var myvideo = document.getElementById("myvideo");

rewindBtn.onclick = function(){

myvideo.playbackRate -= 1;

};

fastforwardBtn.onclick = function(){

myvideo.playbackRate += 1;

};

if ( typeof myvideo.ontimeupdate != "object"){

// DOM Level 0 방식의 이벤트 등록

myvideo.addEventListener( "timeupdate",updateTime)

}else{

// DOM Level 1 방식의 이벤트 등록

myvideo.ontimeupdate =  updateTime ;

}

};

function updateTime(){

var current  = myvideo.currentTime;

var duration = myvideo.duration;

playTime.innerHTML =  current + "/" + duration;

};

사용예 HTML )

   <div>

<video id="myvideo" controls="controls"  width="640" height="360" poster="../img/이미지 파일">

<source src="동영상 파일;"></source>

<p>

비디오 재생을 지원하지 않는 브라우저 입니다.

아래의 링크를 클릭하여 다운로드 받으세요.

</p>

</video>

</div>

<div>

<button id="play">play</button>

<button id="pause">pause</button>

<button id="rewind">&lt;&lt;</button>

<button id="fastforward">&gt;&gt;</button>

<span id="status"></span>

</div>