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

[http://mnworld.co.kr 의 shakej 가 직접 작성한 글입니다]
[본글은 http://www.htmlfive.co.kr/ 의 코리님의 강좌를 듣고 공부해서 다시 쓴 내용입니다]

방금 전 시간에서 가장 획기적인 기능 중 하나가 뭐라고 했었죠!?

네 바로 Video와 Audio를 별도의 플러그인 없이 재생할 수 있는 태그, 바로 이것이 html5 의 최고장점으로 손꼽히고 있는 기술입니다.

일단 기본적으로 브라우저에서 비디오/오디오를 재생하려면(물론 HTML5가 지원이 되는 브라우져에서) 딱 한줄만 추가해주시면되요

<video src="http://비디오주소"> </video>
<audio src="http://오디오주소"> </audio>

물론 각 브라우저마다 지원되는 비디오 포맷형식 (.avi, .mkv, .wmv)와 같은 이 다릅니다.
바로 http://html5test.com/<~ 이곳에서 확인이 가능한데요

위와 같이 지원이 되네요.

기능에서 조금 더 속성에 대해 알아보자면

<video width="320" height="250"
           controls src="비디오주소"
           poster="iamge/xx.jpg" loop="loop" autoplay="autoplay">

음 width , height 는 재생될 동영상의 가로 길이
controls 를 넣으면 브라우져 고유의 컨트롤 바가 표시되게 됩니다.
loop 은 반복될 수이고, 숫자를 넣게 되면 반복될 횟수, 혹은 안에 loop이나 아무것도 넣지 않으면 무한재생이 되게 됩니다.
autoplay 는 브라우져가 켜지자 마자 재생이 될테고,
poster는 재생이 준비 될때까지 보여줄 이미지 URL 이 되겠습니다.

* 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) 로딩 완료 시,

     --> "다운로드 완료"

그럼 어쨌거나 한번 만들어보죠 다들 노트패드를 여시고!

실제로 제일 위에 있는 기본소스로 만들어서 html 파일로 저장하시고,
익스플로워 IE8 버전은 아무 ~ 것도 뜨질 않네요.

두번째로 사파리.

로딩되는 그림까지는 성공적으로 떴으니 .avi 확장자를 읽진 못하네요.. 하!

여러분도 실제로 한번 해보시길 바랍니다^^
+ 참고로 audio는 video 와 다르게 audio라고 적어주시면 됩니다.