HTML5는 이전 버전의 HTML과 달리 멀티미디어적인 요소들이 대거 추가되었다.
오늘은 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 를 추가하면 아래와 같이 컨트롤러가 생긴다.
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 옵션을 추가했기 때문에 컨트롤러가 보여지고 있다.
'프로그래밍 > HTML5' 카테고리의 다른 글
| [꿀강] HTML5 Drag & Drop (드래그 앤 드롭) (0) | 2018.09.13 |
|---|---|
| [꿀강] HTML5 input 속성들 (0) | 2018.09.09 |
| [꿀강] HTML5 Form 관련 태그들 (0) | 2018.09.05 |
| [꿀강] HTML5 Canvas와 SVG가 모야? (0) | 2018.08.30 |
| [꿀강] HTML5에서 사라진 태그와 추가된 태그 (0) | 2018.08.28 |
댓글