Hi Hi

'<video> 태그'에 해당되는 글 1건

  1. HTML5 동영상 재생

HTML5 동영상 재생

 

HTML5 에는 동영상을 재생하는 <video> 태그가 추가되었다.

<video> 태그의 사용 방법
<video
poster="미리보기 그림파일"
src="동영상 파일"
controls="플레이어 표시 여부"
autoplay="자동 시작 여부"
preload="자동 읽어 들이기 여부(auto/metadata/none)"
loop="반복 재생 여부"
>
 <source src="파일명" type="MIME형식"/>
 <source src="파일명" type="MIME형식"/>
    ...
    지원하지 않을 경우 표시할 내용
</video>

<audio> 태그와 마찬가지로 iPone 에서는 autoplay 속성이 무효로 설정되어 있다는 점에 주의 해야한다.
poster 속성에 동영상을 재생할 수 없을 경우에 표시할 그림을 지정할 수도 있다.


다양한 브라우저 지원하기

<video> 태그 내부에 <source> 태그를 추가하여 다양한 파일 형식을 지정한다.
controls 속성을 추가하면 재생 및 정지 기능을 갖춘 동영상 플레이어를 px용 웹 브라우저에서 구현할 수 있게 된다.
<h3>HTML5 동영상 재생</h3>
<video poster="test-img.pnp" controls>
 <source src="test.ogv" type="video/ogg"/>
 <source src="text.3gp" type="video/3gpp"/>
 <source src="test.mp4" type="video/mp4"/>
 
 video 태그를 지원하지 않습니다.
 <a href="test.3gp"> 3gp 형식으로 보기 </a>
 </video>

<video> 태그 내부에 <source> 태그를 추가하여 다양한 파일 형식을 지정한다.
Firefox 에서는 3GP 형식의 동영상 파일을 지원하지 않는다. Firefox에서 지원하는 OGG Theora(.ogv) 형식을 추가한다.


자바스크립트로 동영상 파일 조작

HTML5에서는 자바스크립트로 직접 동영상 파일을 재생하거나 정지하도록 할 수 있다.
동영상 스크립트로 제어할 때에는 document,getElementById() 메소드로 video 객체를 얻은 후,
이 객체의 메서드를 호출하거나 속성의 값을 변경한다.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 동영상 재생</title></head>
<body>
<h3> HTML5 동영상 재생</h3>
<video id="a_video" poster="test-img.pnp" >
 <source src="test.ogv" />
 <source src="text.3gp" />
 <source src="test.mp4" />
 
</video>
<div>
 <input id="play_btn" type="button" value="재생"/>
 <input id="paues_btn" type="button" value="정지"/>
 <input id="play2_btn" type="button" value="처음부터"/>
</div>
<div id="info"></div>
<script type="text/javascript">
 function $ (id) {return document.getElementById(id);}
 var a_video = $("a_video");
 //timeupdate 이벤트를 감시하여 현재 재생중인 위치와 동영상의 전체 길이를 할 수 있다. 각 속성 값들으 활ㅇㅇ하여 일반적으로 동영상 플레이어에서 제공하는 것과 같은 재생바를 구현할 수도 있다.
 a_video.addEventListener("timeupdate", function(){
  $("info").innerHtml = a_video.currentTime+"/"+a_vidoe.duration;
 });

 //onclick 이벤트로 정의되어 있는 play() 메서드 및 pause() 메서드가 호출된다.
 $("play_btn").onclick = function() {a_video.play();}
 $("pause_btn").onclick = function() {a_video.pause();}
 
// 처음부터 재생하려면 currentTime 속성을 '0' 으로 설정한다.
 $("play2_btn").onclick = function() {
  a_video.currentTime = 0;
 a_video.play();
 };
 
 </script>
 
</body>
</html>


아직 지원하는 동영상 포맷이 정리 되지 않았다는 문제점은 있지만 HTML5를 활영하면 매우 간단하게 동영상을 재생할 수 있다.


'' 카테고리의 다른 글

HTML5 웹 SQL 데이터베이스  (0) 2012.01.20
HTML5 로컬 자장소에 데이터 저장 : 웹 스토리지  (3) 2012.01.16
HTML5 동영상 재생  (0) 2012.01.14
HTML5 개발툴 소개  (0) 2012.01.11
HTML5 컨버스의 기초  (0) 2012.01.09
HTML5 프로그래밍의 기초  (0) 2012.01.07