동영상 플러그인이 필요 없는 HTML5 비디오 요소
지금까지 웹에서 음악을 듣거나 동영상을 보기 위해서는 플래시 플레이어를 설치하거나 퀵타임 또는 윈도우 미디어 플레이어 확장 기능을 설치해야 했습니다. 모바일 기기에서 플러그인 프로그램을 실행하고 웹 음악을 들어야 한다면 그만큼 비효율적인 것도 없습니다. 웹에서 이미지를 보듯이 자연스럽게 음악을 듣고 동영상을 보는 방법, HTML5에 있습니다.
- 비디오 파일을 웹 문서에 넣는 <video> 태그
HTML4에서는 <object> 태그를 사용하거나 플래시 플레이어 또는 ActiveX 컨트롤을 사용해야 합니다만 HTML5에서는 <video> 태그 하나로 해결할 수 있습니다.
<video> 태그의 기본 구문
HTML5에서 추구하는 것은 <img> 태그를 이용해 이미지를 삽입하듯 동영상도 <video> 태그를 이용해 간단하게 삽입하자는 것입니다. 이미지를 삽입할 때 <img src="images/picture.jpg" width="300" height="100" />과 같이 소스 파일의 위치와 크기만 지정해 주면 바로 웹 브라우저 화면에 이미지가 표시되듯이, <video> 태그를 이용하면 동영상도 마찬가지 방식으로 삽입할 수 있습니다. 단, HTML5에서 삽입한 동영상은 자동으로 재생되지 않기 때문에 동영상 화면에 콘트롤 막대를 추가하여 재생 단추를 표시하거나 자동 재생되도록 해야 합니다.
<video> 태그에서 함께 사용할 수 있는 옵션은 다음과 같습니다.
|
속성 |
설명 |
|
src |
동영상 파일의 경로를 지정합니다. |
|
poster |
동영상이 화면에 나타나지 않을 때 대신 표시할 그림을 지정합니다. |
|
preload |
동영상이 백그라운드에서 다운로드되어 재생 단추를 눌렀을 때 재생되게 합니다. |
|
autoplay |
동영상을 자동 재생합니다. |
|
loop |
반복 재생 횟수를 지정합니다. |
|
controls |
동영상 화면에 콘트롤 막대를 추가합니다. |
|
width |
동영상 화면의 너비를 지정합니다. |
|
height |
동영상 화면의 높이를 지정합니다. |
poster 속성
poster 이미지는 동영상을 재생할 수 없을 때 동영상 대신 보여주는 이미지입니다. 따라서 동영상 화면과 크기가 같은 이미지를 사용하는 것이 좋습니다. 예를 들어, mp4 동영상만 준비되어 있을 경우 H.264 코덱이 지원되지 않는 브라우저에서는 동영상 자리가 회색으로 보기 흉하게 표시되는데, poster 이미지를 준비하면 그 자리에 poster 이미지가 대신 표시되도록 할 수 있습니다.
controls 속성
controls 속성은 동영상 화면에 동영상을 제어할 수 있는 사용자 인터페이스, 즉 콘트롤 막대를 표시할지 여부를 지정합니다. 이 속성이 있으면 콘트롤 막대가 화면에 표시되는데, 콘트롤 막대에는 재생/일시정지 단추, 트랙 바, 볼륨 조절기 등이 달려 있습니다. 콘트롤 막대의 형태나 바로가기 메뉴는 웹 브라우저에 따라 달라 보일 수 있습니다.
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title> HTML5 동영상 연습</title>
</head>
<body>
<video src="video/20070726.mp4" poster="images/poster.jpg" width="480" height="272" autoplay controls />
</body>
</html>
모든 코덱을 고려해서 작성하려면
아직까지는 주요 웹 브라우저들은 H.264 코덱과 테오라 코덱을 따로 지원하기 때문에 <video> 태그를 사용할 때 두 종류의 동영상을 함께 삽입해야 합니다. 여기에 최근에 개편된 VP8 코덱으로 인코딩된 파일까지 삽입한다면 가장 완벽할 것입니다. 앞으로 비디오 코덱의 표준이 정해진다면 소스 코드가 좀 더 간결해지겠지만 그렇지 않을 경우에는 이런 방법을 계속 사용해야 할 것입니다.
둘 이상의 동영상을 함께 사용하는 경우 <video> 태그에서는 동영상의 크기와 기타 속성을 지정해 주고, 코덱에 따라 달라지는 동영상 파일의 위치는 <source> 태그를 더 사용해서 연결합니다.
예를 들어 childe.ogv 파일이라면 파일 유형의 type을 video/ogg로, 코덱은 theora, vorbis로 지정하면 됩니다. 그리고 mp4 파일의 경우 사용되는 mp4 코덱이 여러 개의 프로파일을 가지고 있어 코덱을 정확히 모를 때는 코덱을 표기하지 않고 type을 지정해도 됩니다.
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>HTML5 동영상 연습</title>
</head>
<body>
<video poster="images/without.jpg" width="480" height="272" autoplay controls>
<source src="video/20070726.mp4" type="video/mp4" />
<source src="video/20070726.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</body>
</html>
- <audio> 태그와 속성들
지금까지는 웹에서 음악을 재생할 때 플래시 플레이어나 윈도우 미디어 플레이어, 퀵타임 등의 프로그램을 이용해야 했습니다. 웹 브라우저 자체에서 음악을 재생할 수 없기 때문입니다. HTML5에서는 <audio> 요소를 도입함으로써 웹 브라우저에서 바로 음악을 재생할 수 있도록 했습니다.
<audio> 요소는 <video> 요소와 사용법이 거의 같습니다. 삽입할 음악 파일을 지정해 주고 필요한 속성만 추가하면 되는데, <audio> 태그에서 사용할 수 있는 속성 역시 <video> 태그의 속성과 거의 같습니다.
<audio> 태그를 사용해 웹 브라우저에서 재생할 수 있는 음악 파일 형식은 다음과 같습니다.
|
브라우저 |
파일 형식 |
|
파이어폭스 3.5++ |
ogg, wav |
|
오페라 10.5 |
wav |
|
사파리 |
mp3, wav |
|
크롬5 |
ogg, mp3 |
|
인터넷 익스플로러8 |
지원 안함 |
<audio> 태그를 사용하면 편리하긴 하지만 아직까지는 브라우저마다 사용할 수 있는 음악 파일이 다르기 때문에 <video> 태그에서와 마찬가지로 <source> 태그를 이용해 종류마다 따로따로 지정해 주어야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>오랜 프랑스 멜로디</title>
</head>
<body>
<audio controls autoplay>
<source src="sound/old_melody.ogg" />
<source src="sound/old_melody.mp3" />
</audio>
</body>
</html>
이 때 명심할 것이 하나 있습니다. 파이어폭스의 경우 <source> 태그에 대한 버그가 있어서 자기가 지원하지 않는 파일 형식은 제대로 처리하지 못한다는 것입니다.
즉 <source src="sound/old_melody.mp3">라는 소스를 먼저 쓰게 되면 음악이 제대로 재생되지 않습니다. 따라서 위의 소스에서 보는 것처럼 ogg 파일의 경로를 먼저 입력해야 합니다.
'웹코딩 > HTML5 CSS3' 카테고리의 다른 글
| HTML5 입력양식 태그 (0) | 2016.11.03 |
|---|---|
| HTML5 video 태그 ie 에서 실행되지 않을때 video.js 플러그인 (0) | 2016.11.03 |
| HTM5에 새로 추가된 주요 태그들 (0) | 2016.10.12 |
| HTML5의 시멘틱 태그 (0) | 2016.10.12 |
| HTML5의 새 요소 (0) | 2016.10.12 |
