HTML4까지는 웹 브라우저에 멀티미디어 파일을 삽입하더라도 파일을 재생하려면 웹 브라우저가 아닌 별도의 프로그램(plug-in)이 필요했지만 HTML5에서는 웹 브라우저 안에서 멀티미디어를 직접 재생할 수 있습니다.
<object>태그와 <embed>태그
플러그인 사용하기
웹 브라우저에서 처리할 수 없는 작업을 위해 웹 문서 안에 포함시킨 외부프로그램 기능을 플러그인이라고 합니다. 이런 플러그인을 웹 브라우저에 적용하려면<object>태그와 <embed>태그를 사용합니다.
<object>태그 - 외부 파일 삽입하기
<object>태그는 웹 브라우저에서 직접 재생할 수 없는 자바 애플릿이나 PDF파일, 플래스무비 같은 콘텐츠를 웹 문서 안에 포함시키기 위해 사용합니다. 또한 다른 HTML문서도 웹 문서에 포함시킬 수 있습니다.
| 기본형 | 설명 |
| <object data="경로" type="유형" [name="이름" width="너비" height="높이"]></object> | PDF파일, 플래스무비 같은 콘텐츠를 웹 문서 안에 포함시키기 위해 사용합니다. |
<object>태그에서 사용할수 있는 속성
| 속성 | 설명 |
| data | 외부 파일의 경로를 지정합니다. |
| type | 포함시킨 내용의 유형을 지정합니다. |
| name | 다른 요소들과 구분할 수 있는 이름을 지정합니다. |
| width | 포함시킨 내용의 너비 값을 지정합니다. |
| height | 포함시킨 내용의 높이 값을 지정합니다. |
<embed>태그
외부 파일 삽입하기
| 기본형 | 설명 |
| <embed src="경로" type="유형" width="너비" height="높이"> | 웹 브라우저에서 재생할 수 없는 콘텐츠를 웹 문서에 삽입할 때 사용합니다. |
<object>태그와 달리 닫는 태그가 없는 <embed>태그는 주로 <object>태그를 지원하지 않는 이전 브라우저에서 사용합니다.
멀티 미디어의 웹 표준화
HTML5는 PC뿐만 아니라 웹 브라우저가 설치된 모든 기기에 적용되는 웹 표준이므로 플러그인 프로그램 없이 웹 브라우저 자체에서 멀티미디어를 재생할 수 있습니다. 웹에서 지원되는 비디오/오디오 파일에는 여러 종류가 있습니다.
| 종류 | 확장자 | 설명 |
| 비디오 | mp4 | 고화질 영상을 지원해 많은 사이트에서 사용되고 있습니다. 라이선스가 있지만 웹에서 사용할 경우에는 무료로 사용할 수 있습니다. |
| webm | 화질이 우수하고 무료로 제공되어 최근 많이 사용되고 있습니다. | |
| ogv | 화질은 다른 비디오 유형보다 떨어지지만 무료라는 장점 때문에 webm 형식이 등장하기 전에 많이 사용되었습니다. | |
| 오디오 | mp3 | 대부분의 음원에서 사용되지만 라이선스 때문에 유료로 사용해야 합니다. |
| ogg | 무료이므로 게임 등에서 많이 사용합니다. |
최신 모던 웹 브라우저에서는 비디오 파일의 경우 mp4나 webm, 오디오 파일의 경우 mp3나 ogg파일을 주로 사용합니다.
| 브라우저 | 비디오 | 오디오 | |||
| mp4 | webm | ogv | mp3 | ogg | |
| 인터넷 익스플로러 | O(9+) | X | X | O(9+) | X |
| 크롬 | O(all) | O(25+) | O(all) | O(all) | O(all) |
| 파이어폭스 | O(35+) | O(28+) | O(3.5+) | O(22+) | O(3.5+) |
| 사파리 | O(3.2+) | X | X | O(+4) | X |
| 오페라 | O(25+) | O | O(11.5+) | (O15+) | O(11.5+) |
| iOS사파리 | O(all) | X | X | O(4.1+) | X |
| 안드로이드 브라우저 | O(4.4+) | X | X | O(2.3+) | O(2.3) |
HTML5와 비디오 코덱
캠코더나 휴대폰 등 여러 장치를 이용해 비디오를 촬영할 수 있는데 촬영한 비디오 파일이 있더라도 컴퓨터에서 곧바로 사용할 수 는 없고 원본 비디오를 최대한 압축해 컴퓨터에서 사용할 수 있는 비디오 파일로 변환해 합니다. 이 과정을(encoding)이라고 합니다. 반대로 비디오 파일에 저장되어 있는 비디오 정보를 가져와 비디오 플레이어에 보여 주는 과정을 디코딩(decoding)이라고 합니다.
인코딩과 디코딩을 수행하는 것이 비디오 코덱인데 현재 사용할 수 있는 비디오 코덱은 여러종류가 있습니다. 예를 들어 우리가 자주 보는 WMV(Windows Media Video)라는 코덱은 원본 비디오를 윈도우의 '윈도우 미디어 플레이어'로 볼 수 있도록 변환해 줍니다.
비디오 코덱에는 다음과 같은 종류가 있습니다.
H264/AVC, v8, v9, 오그 테오라(Ogg Theora)
HTML5와 오디오코덱
1 MPEG-1 AUDIO Layer3, Ogg Vorbis
오디오 & 비디오 재생하기
<audio>태그
오디오 파일 삽입하기
일반적으로 대부분의 브라우저에서 가능하면 mp3 파일을 삽입하며 ogg(또는 oga)파일은 함께 지정하지 않는 경우가 많습니다.
| 기본형 | 설명 |
| <audio src="오디오 파일 경로" [속성] [속성="속성 값"]></audio> | 배경음악이나 효과음을 넣을때 사용한다. |
<audio>태그에서 사용되는 속성
| 속성 | 설명 |
| autoplay | 오디오를 자동 재생합니다. |
| controls | 웹 화면에 컨트롤 막대를 표시합니다. 컨트롤 막대에는 재생/멈춤, 진행 바, 볼륨 등이 표시됩니다. |
| loop | 오디오를 반복 재생합니다. |
| muted | 오디오를 재생해 진행하지만 소리는 끕니다. |
| preload | 재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드해 준비해 둡니다. |
<video>태그
비디오 파일 삽입하기
| 기본형 | 설명 |
| <video src="비디오 파일 경로" [속성] [속성="속성 값"]></video> | 웹 문서에 비디오를 삽입할때 사용한다. audio와 태그를 공유한다. |
<audio>태그와 <video>태그의 속성
<audio> 태그와 <video>태그에서 사용할 수 있는 속성은 거의 일치하기 때문에 함께 소개합니다.
| 속성 | 설명 |
| width,height | 비디오 크기 조절 |
| controls | 컨트롤 막대 표시 |
| muted | 비디오 재생 시 소리는 끄고 화면만 재생합니다. |
| autoplay | 자동 재생(주요 브라우저에서 muted랑 같이써야 재생됨) |
| loop | 반복 재생 |
| poster | 영상을 보기전에 미리보기 이미지 <video src="media/Painting.mp4" controls poster="fireworks.jpg"></video> |
<source>태그
여러 미디어 파일 한꺼번에 지정하기(멀티미디어)
브라우저에 따라 지원하는 오디오 코덱이나 비디오 코덱이 다르기 때문에 한 가지 파일만 사용했을 경우, 일부 오래된 브라우저에서는 지원하지 않을 수 있습니다.
사용자들의 브라우저 환경을 모두 고려한다면 최신 브라우저와 이전 브라우저에서 모두 재생할 수 있도록 ogv 파일도 함께 지정해주어야 합니다. 최근에는 무료 코덱을 사용하면서 화질도 뛰어난 webm파일까지 함께 사용합니다.
| 기본형 | 설명 |
| <source src="video.ogv" type="video/ogg; codecs='theora,vorbis'"> | 미디어 파일의 경로를 지정하는 src 속성과 미디어 파일의 형식을 알려주는 type속성을 같이 사용합니다. type만 사용할 수 있고, codecs속성을 이용해 코덱까지 함께 표시할 수 있습니다. |
| 속성 | 설명 |
| src | 미디어 파일의 경로를 지정하는 필수 속성으로 파일 경로를 지정할 때는 경로에 공백이 있으면 안됩니다. |
| type | 웹 브라우저가 해당 미디어 파일을 재생할 수 있는지 여부를 확인할 수 있도록 미디어 파일의 유형을 알려줍니다. |
| codecs | 비디오 코덱을 지정합니다. |
<video>태그를 지원하지 않는 이전브라우저를 위해 HTML5지원 브라우저가 필요하다는 대체 텍스트를 표시할 수 있습니다.
<video controls>
<source src="media/Painting.mp4" type="video/mp4">
<source src="media/Painting.webm" type="video/webm">
<source src="media/Painting.ogv" type="video/ogg">
이 영상을 보기 위해서는 HTML5를 지원하는 브라우저가 필요합니다
</video>
<track>태그
비디오 화면에 자막 추가하기
HTML5에서는 비디오 콘텐츠를 웹 페이지에 삽입할 때 청각 장애인용 자막을 표시하는 것이 기본입니다.
| 기본형 | 설명 |
| <track kind="자막 종류" src="경로" srclang="언어" label="제목" default> | 자막을 추가한다. |
<track>태그의 속성
1. kind속성
| 속성 값 | 설명 |
| subtitles | 자막입니다. 소리를 켤 수 있지만 이해할 수 없는 경우, 다른 언어로 번역한 자막일 경우에 사용하며 비디오 화면에 표시됩니다. |
| captions | 캡션입니다. 청각장애인용 자막이거나 소리를 들을 수 없거나 켤 수 없는 경우에 사용합니다. 비디오 화면에 표시됩니다. |
| descriptions | 비디오 콘텐츠에 대한 설명입니다. 비디오 화면에는 표시되지 않습니다. |
| chapters | 비디오 탐색을 위한 장 제목입니다. 비디오 화면에 표시되지 않습니다. |
| metadata | 비디오 콘텐츠 정보입니다. 비디오 화면에 표시되지 않습니다. |
2. src 속성
자막 텍스트의 파일 경로를 지정합니다.
3. srclang 속성
사용한 언어를 지정합니다. kind속성 값이 subtitle이라면 반드시 지정해야하는데 en이나 ko처럼 언어를 약자로 표기합니다.
4. label속성
자막이 여러 개일 경우, 자막을 식별할 수 있도록 제목을 달아줍니다.
5. default 속성
자막 파일이 여러 개일 경우, 기본으로 사용할 자막을 default로 지정할 수 있습니다.
| 기본형 | |
| <track kind="subtitles" src="Wildlife.vtt" srclang"ko" label="korean" default> |
WebVTT자막 파일
HTML5에서는 srt파일을 사용하지만 모든 브라우저에서 공식적으로 지원하는 자막 파일 형식은 WebVTT(Web Video Text Track)형식입니다.
비디오 파일에 자막 파일 연결하기
| 기본형 |
| <video controls> <source src="media/Painting.mp4" type="video/mp4"> <source src="media/Painting.web" type="video/webm"> <track src="media/Painting.vtt" srclang="ko" label="korean" default> </video> |