티스토리 뷰
HTML 5에 추가된 기능 중 동영상을 재생해주는 video 태그가 있습니다. 사용방법과 재생 가능한 동영상, 음성 코덱이 어떤 것인지 알아보려고 합니다. 그리고 jQuery를 사용하여 클릭하는 메뉴에 따라서 동영상을 동적으로 재생하는 방법도 살펴보겠습니다.
HTML 5 video
HTML 5 비디오 태그는 HTML 5의 초안 규격에서 소개된 언어 태그입니다. 동영상을 임베드(embed)하는 것을 지원해주고 있습니다. 기본 동영상 코덱은 아직 완전히 성립되지는 않았고, 사용가능한 브라우저에 따라서 내용이 다릅니다. 현재까지의 데이터는 위키피디아를 참고하여 작성합니다. 자세한 브라우저별 지원 내용은 아래 사이트에서 참고하시기 바랍니다.
http://en.wikipedia.org/wiki/HTML5_video
웹 브라우저의 종류마다 약간의 차이가 존재하지만 Ogg Theora, H.264/MPEG-4 AVC, VP8 코덱을 지원하고 있습니다. 제가 테스트 했던 크롬 브라우저는 3개 모두 지원하고 있습니다.
HTML 5 video 예제 코드
<video poster="movie.jpg" width="400" height="300" controls="controls"> <source src="movie.ogg" type='video/ogg; /> <source src="movie.mp4" type='video/mp4; /> <p>지원하지 않는 브라우저입니다.</p> </video>
위의 코드가 가장 기본적인 video 예제 코드입니다. video의 사이즈를 정하고, 실제 source를 통해서 재생할 동영상과 음악을 추가하게 됩니다. 그리고 마지막 문구는 지원하지 않을 경우에 보여지게 되는 메시지입니다. video에 poster를 추가할 수도 있습니다.
HTML 5 video Tags 설명
video 부분에 추가할 수 있는 변수
| autoplay | autoplay="autoplay" |
동영상을 자동으로 재생할 것인지에 대한 설정 |
| controls | controls="controls" |
동영상 재생시 컨트롤을 화면에 보여주게 할 것인지에 대한 설정 |
| height | height="pixels" |
동영상 재생 창의 높이 설정 |
| loop | loop="loop" |
동영상 반복을 할 것인지 설정 |
muted |
muted="muted" |
동영상 재생시 소리 음소거를 |
| poster | poster="URL" | 동영상을 기다리는 동안 보여지게 될 이미지를 설정 |
| preload | preload="auto metadata none" | 동영상을 재생하기 전에 미리 준비(다운로드)할 것인지를 설정하게 됩니다. 옵션은 auto(자동으로 동영상을 미리 준비), metadata(크기, 첫 프레임, 트랙 리스트, 길이 등을 미리 로드), none(아무것도 하지않음) 중에 선택하면 됩니다. |
src | src="URL" | 동영상의 URL을 추가 |
| width | width="pixels" | 동영상의 넓이를 지정합니다. |
source 부분에 추가할 수 있는 변수
| media | media="media_query" |
미디어 자원의 유형을 지정 |
| src | src="URL" |
미디어 파일의 경로를 불러옵니다.(동영상, 음악) |
| type | type="MIME_type" |
미디어 자원의 MIME 유형을 |
jQuery를 활용한 동영상 재생
결과 화면, Sample Movie 2개를 이용하고, 2개의 동영상을 사용자가 선택하여 재생하는 코드입니다. jQuery를 꼭 사용하지 않아도 되지만 jQuery를 활용한 샘플을 만들다가 나온 코드라서 아래와 같이 샘플 코드를 추가해봅니다.
샘플 코드
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<script src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
//사용자 선택에 따라 재생 동영상을 불러 옴
function movieDialog(str) {
//선택한 버튼의 동영상 경로를 불러옴
$("#movie_src").attr("src", $(str).attr("value"));
//동영상을 다시 load 함
$("#a_video").load();
//load한 동영상을 재생
document.getElementById("a_video").play();
};
</script>
</head>
<body>
<video width="700" id="a_video">
<source id="movie_src" type="video/mp4" src="sample_1.mp4" />
</video>
<br />
<a onClick="movieDialog(this)" href="#" value="sample_1.mp4">sample movie 1</a>
<a onClick="movieDialog(this)" href="#" value="sample_2.mp4">sample movie 2</a>
</body>
</html>마무리
HTML 5를 통한 동영상 재생 프로그램을 간단히 살펴봤습니다. 처음에 시도할 때 동영상 코덱과 음성 코덱 때문에 재생되지 않는 경우도 있었습니다. 동영상은 MPEG-4 H.264로 설정하여 mp4 확장자를 가지게 되고 음성은 AVC를 사용한 동영상을 통해 재생이 되었습니다. 일단 별다른 plugin 없이 웹 상에서 그냥 동작한다는 것 자체가 좋은 것 같습니다.
'Programming language' 카테고리의 다른 글
| Eclipse Color Theme 설치 및 설정 방법 (0) | 2013.04.01 |
|---|---|
| Tistory CSS를 이용하여 img 사이즈 조절하기 (0) | 2012.12.12 |
| Python으로 구현한 Factory Method Pattern (0) | 2012.11.05 |
| 구글 Web Fonts에서 제공하는 나눔글꼴을 tistory에 적용하기 (10) | 2012.10.31 |
| html 5 기반의 음성입력 Speech Input 추가 (0) | 2012.09.23 |
댓글