[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라고 적어주시면 됩니다.
'옛글 > 프론트 이야기' 카테고리의 다른 글
[쉬운제로보드]간단한 자기홈페이지 만들기 (0) | 2011.01.19 |
---|---|
[HTML5이야기] 시맨틱 엘리먼트!? (0) | 2011.01.04 |
[HTML5이야기] HTML5 지원여부 감지 (0) | 2011.01.03 |
[쉬운HTML] 두번째 시간 - 티스토리 블로그 HTML/CSS를 파헤쳐보자 (3) | 2011.01.03 |
[쉬운HTML] 첫번째 시간 - HTML 맛보기 (2) | 2011.01.03 |