자바스크립트를 이용한 video/audio 제어 HTML5



자바스크립트를 이용한 video/audio 제어

 

 

 

앞서 봤던 예제들은 좀 심플했다.

재생이 가능하지만, 어딘가 모르게 약간 모자른 동네형 같은 느낌이다.

 

자바스크립트를 이용해서 좀 더 똑똑한 플레이어를 만들어 낼 수 있다.

관련 api의 전체는 이 글에서 다루기 어렵다. (책에서도 그랬으니깐 -ㅠ-)

일부 api만을 살펴보도록 한다.

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 Test </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
 function FuncCheck(){
  var objVideo = document.getElementById("myVideo");

  alert(
   "currentSrc : " + objVideo.currentSrc + "\n\n" +
   "currentTime : " + objVideo.currentTime + "\n\n" +
   "startTime : " + objVideo.startTime + "\n\n" +
   "duration : " + objVideo.duration + "\n\n" +
   "paused : " + objVideo.paused + "\n\n" +
   "defaultPlaybackRate : " + objVideo.defaultPlaybackRate + "\n\n" +
   "playbackRate : " + objVideo.playbackRate + "\n\n" +
   "ended : " + objVideo.ended + "\n\n" +
   "muted : " + objVideo.muted + "\n\n" +
   "volume : " + objVideo.volume + "\n\n"
  );
 }
//-->
</SCRIPT>
</HEAD>
<BODY>
 <video id="myVideo"
  width="400" height="300"
  poster="http://desmond.yfrog.com/Himg29/scaled.php?tn=0&server=29&filename=r16t.jpg&xsize=640&ysize=640"
  controls >
  이 페이지가 보이지 않는다면, 당신은 구형 브라우저를 사용중입니다.
  <source src="http://double.co.nz/video_test/BillysBrowser480.ogg"
   type="video/ogg"></source>
 </video>
 <br/>
 <input type="button" value="check it" onClick="FuncCheck()"/>
</BODY>
</HTML>

 

보라색부분이 아래위로 있지만, 하단의 버튼을 클릭하면 위의 function이 호출되는 구조이다.

직접 실행시켜보면, 아~ 이런거구나! 라고 알수 있을것이고, 그 활용방법또한 사람마다 다를것입니다.

아래는 위 예제의 실행모습입니다.

 

 

제가 스스로 공부하면서 메모해두는식으로 포스트를 남기는것이지만, 제가 생각해도 너무 친절합니다.

 

일단 여기까지 포스팅하고, 전 잠깐 외출하러 슝~~~

여기다가 계속 이어서 쓸거에요~

 

라고 했는데... 막상와서 책을 펼치니 별로 쓸게없군요.

-_-; 쯥...


덧글

댓글 입력 영역


통계 위젯 (화이트)

1522
132
358625

red 210