[HTML5이야기] Video & Audio 태그 집중 분석

* video 태그를 지원하지 않는 브라우저의 경우

  경고를 표시하고 싶을 때,

 <video src="http://동영상주소">

  경고 : 이 브라우저는 video 재생을 지원하지 않습니다.

 </video> 

 이런 식으로 넣어주시면 video 태그를 못 읽는 경우 경고문구만 나오게 됩니다.

 ( 구버전 IE를 대비해서 사용하시면 됩니다. ) 

* 자바스크립트를 이용한 video 요소 제어

 <video id="cory" src="http://동영상주소"></video>

 이렇게 설정하고 스크립트 부분에서

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

 이렇게 설정합니다.

   동영상 재생을 원하는 경우   cory.play();

   동영상 일시정지 원하는 경우  cory.pause();

   동영상 주소 변경 후 다시 로딩 하는 것을 원하는 경우

   cory.src = 새로운 주소;

   cory.load();

* networkState 를 이용하여 다운로드 로딩화면과 로딩완료 표시하기

 <video id="cory" src="http://동영상주소"></video>

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

 // video 태그에 이벤트 리스너를 등록 

 cory.addEventListener("progress", function(e) {

     var networkStateDisplay = document.getElementById("networkState");

     if(cory.networkState == 2) { //.networkState == 2 :: 로딩 중

        networkStateDisplay.innerHTML = 

           "다운로드 중... ["+e.loaded+"/"+e.total+"byte]"; 

     } else if (cory.networkState == 3) {   //.networkState == 3 :: 로딩완료

        networkStateDisplay.innerHTML = "다운로드 완료";

     }

 }, false);

  --== 실행 시 ==--

  1) 로딩 중일 때,

     --> "다운로드 중... [ 현재 다운로드받은 크기 / 총 사이즈 byte ]"

  2) 로딩 완료 시,

     --> "다운로드 완료"