본문 바로가기

HTML5

html5 audio, video

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단에서 컨트롤시
                                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의 플레이스피드를 변경할 수 있는데
function speed(spd){
video.playbackRate = video.playbackRate + spd;  

video 객체의 playbackRate속성을 사용하시면 됩니다.

'HTML5' 카테고리의 다른 글

html5 manifest  (0) 2012.03.15
html5 지원 사이트 - 측정  (0) 2012.01.03