HTML5는 이전 버전의 HTML과 달리 멀티미디어적인 요소들이 대거 추가되었다.

오늘은 Video 태그에 대해 알아 보도록 하자.

 

 

1. Video 태그

 

HTML5에서는 ActiveX 또는 플러그인 없이 브라우저 자체에서 동영상을 재생할 수 있다.

현재 업계의 표준 코덱은 H.264이다.

우리가 흔히 알고 있는 확장자가 mp4가 바로 이것이다.

하지만 H.264는 라이센스 문제로 파이어 폭스나 오페라에서는 재생이 되지 않는다.

그래서 오늘은 IE11 버전에서 테스트를 진행해 볼 것이다.

 

우선 HTML5에서는 이전 HTML과 달리 DOCTYPE 을 간결하게 선언하고 있다.

아래와 같이 선언해주면 끝이다.

<!DOCTYPE HTML>

 

그럼 아래와 같이 입력해보자.

 

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>비부스</title>
</head>
<body>
    <video src="2013.mp4"></video>
</body>
</html>

 

 

 

소스를 입력하고 실행하면 아래와 같이 재생화면을 볼 수 있을 것이다.

 

 

 

하지만 이게 재생화면인지 이미지인지 모를 것이다.

마우스 오른쪽 마우스를 클릭하면 메뉴가 팝업되고 그 안에 재생버튼이 존재한다.

 

 

 

Video 태그는 내부에 여러가지 옵션을 줄 수 있다.

autoplay, controls, preload와 같은 옵션을 지정하면

동영상이 자동 재생되거나, 밑 부분에 컨트롤러가 생기거나, 큰 파일의 경우 preload가 된다.

 

<video src="kongsoonyi.mp4" controls></video>

 

 

controls 를 추가하면 아래와 같이 컨트롤러가 생긴다.

 

 

 

 

 

2. Audio 태그

 

Audio 태그는 Video 태그와 사용법이 유사하다.

Audio 파일 포맷 중 대표적인 mp3 파일은 mp4 파일과 같이 라이센스 비용을 지불해야 한다.

그렇기 때문에 파이어폭스와 오페라에서는 지원하지 않고 있다.

 

아래와 같이 소스를 입력해 보자.

 

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>비부스</title>
</head>
<body>
<audio controls="controls">
    <source src="BTS.mp3">
</audio>
<p>방탄소년단 재생 중..</p>
</body>
</html>

 

 

아래와 같이 mp3가 재생되는걸 확인할 수 있다.

또한 controls 옵션을 추가했기 때문에 컨트롤러가 보여지고 있다.

 

 

 

 

 

+ Recent posts