블로그 이사준비중 - Captain Of my Soul is JH

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

by 농사꾼봉팔
2013/11/05 15:56
nom3203.egloos.com/2768056
덧글수 : 1

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

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

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

http://busydeveloper.tistory.com

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

트랙백(200)덧글(1)

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

by 농사꾼봉팔
2010/09/03 10:50
nom3203.egloos.com/2672982
덧글수 : 0

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

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

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

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

<!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>

</BODY>
</HTML>

결과화면

트랙백(0)덧글(0)

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

by 농사꾼봉팔
2010/08/24 22:56
nom3203.egloos.com/2667672
덧글수 : 0

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>

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

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

트랙백(0)덧글(0)

블로그 이사준비중 - Captain Of my Soul is JH

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

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

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

프로필

카테고리

통계 위젯 (화이트)

red 210

최근 덧글

태그

RSS