HTML5에서는 아시다시피 audio와 video를 html상에서 직접 컨트롤 할 수가 있습니다.
참고 URL
http://www.html5demos.com
*) 사용방법 예시
<video src="비디오파일 경로">
</video>
<audio src="오디오파일 경로" >
</audio>
<video >
<source src="비디오파일 경로">
<source src="비디오파일 경로">
<source src="비디오파일 경로">
<source src="비디오파일 경로">
</video>
<audio>
<source src="오디오파일 경로"/>
<source src="오디오파일 경로"/>
<source src="오디오파일 경로"/>
<source src="오디오파일 경로"/>
</audio>
위와같이 audio와 video가 <source></source>를 이용해서 사용할 파일을 링크할 수 있는데
문제는 저렇게 위에서처럼 여러개를 넣는다고 해서 차례대로 플레이가 되고 그런건 아니고 한개만 인식됩니다.
그리고 속성에서 보면 autoplay라는 녀석과 preload라는 녀석이 있는데 autoplay를 사용하는 경우 preload속성은
무시됩니다.
preload는 화면이 로드된 후 소스파일을 로드해서 플레이할 수 있는상태로 대기해놓겠다 싶을 경우 사용하게됩니다.
script단에서 컨트롤시
video 객체의 playbackRate속성을 사용하시면 됩니다.
참고 URL
http://www.html5demos.com
*) 사용방법 예시
<video src="비디오파일 경로">
</video>
<audio src="오디오파일 경로" >
</audio>
<video >
<source src="비디오파일 경로">
<source src="비디오파일 경로">
<source src="비디오파일 경로">
<source src="비디오파일 경로">
</video>
<audio>
<source src="오디오파일 경로"/>
<source src="오디오파일 경로"/>
<source src="오디오파일 경로"/>
<source src="오디오파일 경로"/>
</audio>
위와같이 audio와 video가 <source></source>를 이용해서 사용할 파일을 링크할 수 있는데
문제는 저렇게 위에서처럼 여러개를 넣는다고 해서 차례대로 플레이가 되고 그런건 아니고 한개만 인식됩니다.
그리고 속성에서 보면 autoplay라는 녀석과 preload라는 녀석이 있는데 autoplay를 사용하는 경우 preload속성은
무시됩니다.
preload는 화면이 로드된 후 소스파일을 로드해서 플레이할 수 있는상태로 대기해놓겠다 싶을 경우 사용하게됩니다.
script단에서 컨트롤시
var audio = document.createElement("audio");
audio.src = "preview.mp3";
if(audio != null && audio.canPlayType && audio.canPlayType("audio/mp3")){
audio.preload = pre;
audio.controls = true;
audio.src = "preview.mp3";
}
그리고 script에서 video의 플레이스피드를 변경할 수 있는데
}
그리고 script에서 video의 플레이스피드를 변경할 수 있는데
function speed(spd){
video.playbackRate = video.playbackRate + spd;
} video 객체의 playbackRate속성을 사용하시면 됩니다.
'HTML5' 카테고리의 다른 글
html5 manifest (0) | 2012.03.15 |
---|---|
html5 지원 사이트 - 측정 (0) | 2012.01.03 |