안내드립니다. 일상에 대한 잡기

블로그 이사준비를 하고 있습니다.

특정 포털에 속하지 않는 자체 블로그로 이사예정입니다.

이사할 블로그의 주소는 아래와 같습니다. 

    http://busydeveloper.tistory.com

이 포스트는 이사완료시점까지 최상단에 위치합니다.

<VIDEO> 데이터 로딩 및 재생시 발생하는 이벤트에 대한 처리 HTML5

미디어 데이터를 로드하고 재생할때에 발생하는 이벤트에 대한 처리방법에 대해 살짝 보고 가겠다

데이터 로드 시작, 종료 등등의 로드관련 이벤트와 재생시작, 재생중, 재생완료 등의 재생관련 이벤트이다.

긴말 필요없고 코드와 결과화면만 봐도 뭐 알것이다.

 

많은 이벤트를 모두 처리해보진 못했지만, 기타 이벤트관련 문서를 찾아보고 직접 내용을 추가해보기 바란다.

 

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 Test </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
 function funcTest() {

  var waitingCount = 0;

  var video = document.getElementById("myVideo");
  var statu = document.getElementById("statu");
  var time = document.getElementById("time");
  var canplay = document.getElementById("canplay");
  var waiting = document.getElementById("waiting");

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

  video.addEventListener("timeupdate", function(){
   time.innerHTML = Math.floor(video.currentTime) + "/" + Math.floor(video.duration) + " (초)"
   }, false);

  video.addEventListener("play", function(){
   statu.innerHTML = "재생진입";
   }, false);
  
  video.addEventListener("playing", function(){
   statu.innerHTML = "재생시작";
   }, false);

  video.addEventListener("ended", function(){
   statu.innerHTML = "재생종료";
   }, false);

  video.addEventListener("canplay", function(){
   canplay.innerHTML = "재생가능";
   }, false);

  video.addEventListener("waiting", function(){
   waiting.innerHTML = waitingCount++;
   }, false);

  video.addEventListener("load", function(){
   load.innerHTML = "데이터 다운로드완료";
   }, false);

 }
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="funcTest()">
 <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"
 autoplay
 controls
 >
 이 페이지가 보이지 않는다면, 당신은 구형 브라우저를 사용중입니다.
 <source
  src="http://double.co.nz/video_test/BillysBrowser480.ogg"
  type="video/ogg"
  />
 </video>
 
 <br/>

 <hr />재생관련<hr />
 <span>재생시간 : </span><span id="time"></span>
 <br/><br/>
 <span>현재상태 : </span><span id="statu"></span>
 <br/><br/>
 <span>canplay : </span><span id="canplay"></span>
 <br/><br/>
 <span>waiting : </span><span id="waiting"></span>

 <hr />데이터 로드관련<hr />
 <span>load : </span><span id="load"></span>
 <br/><br/>

</BODY>
</HTML>

 

 

 


 

결과화면

 

 


Audio 고유 생성자를 이용힌 Pre Load HTML5

Audio 고유 생성자를 이용

 

 

audio 요소는 'Audio'라는 생성자를 이용하여 객체를 생성할 수 있다.

두가지 방법이 있는데, 한번 살펴보자.

 

 

      - new Audio() : 빈 audio 요소를 생성

 

      - new Audio(url) : 음성 데이터를 가리키는 URL을 인수로 가진다. 이 인수를 지정하면, src 속성에 값을 셋팅하는 효과

 

 

이 생성자를 이용하여 웹 애플리케이션에서 사용할 음성 데이터를 먼저 읽어들여 캐시로 저장이 가능하다.

아래 예제에서 페이지 로딩과 동시에 음성데이터를 먼저 읽어오고 있기에 재생버튼을 누르면 로딩과정없이 재생이 된다.

예제를 살펴보자.

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE> HTML5 Test </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
 var audios = {
  "262Hz" : new Audio("http://upload.wikimedia.org/wikipedia/commons/0/03/262Hz.ogg"),
  "392Hz" : new Audio("http://upload.wikimedia.org/wikipedia/commons/7/71/392Hz.ogg")
 };

 function preload() {
  for (var i in audios) {
   audios[i].load()
  }
 }
//-->
</SCRIPT>
</HEAD>
<BODY>
 <button onclick="audios['262Hz'].play()">262Hz</button>
 <button onclick="audios['392Hz'].play()">392Hz</button>
</BODY>
</HTML>

 

 

뭐 캡처이미지는 봐봐야 소용없다. 귀로 들리는것이기에...

눈으로 그냥 보고 지나치자.

 


1 2 3 4 5 6 7 8 9 10 다음


통계 위젯 (화이트)

1225
139
355595

red 210