HTML 멀티미디어
멀티미디어 파일 형식
HTML5 이전까지는 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리해 왔습니다.
하지만 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단히 사용할 수 있게 되었습니다.
웹 브라우저는 파일의 타입(type)을 파일의 확장자로 판단합니다.
만약에 확장자가 .html인 파일을 보면, 웹 브라우저는 이 파일을 HTML 파일로써 다루게 될 것입니다.
비디오(video)나 사운드(sound)와 같은 멀티미디어 요소들은 멀티미디어 파일에 저장됩니다.
이와 같은 멀티미디어 파일도 다음과 같이 다양한 파일 형식으로 저장될 수 있습니다.
비디오(video) 파일 형식
대표적인 비디오 파일 형식은 다음과 같습니다.
| 파일 형식 | 파일 확장자 | 설명 |
| MPEG | .mpg .mpeg | Moving Picture Experts Group에 의해 개발되었으며, 변환 코덱을 이용하는 손실 압축 방식을 사용함. |
| MP4 | .mp4 | Moving Picture Experts Group에 의해 개발되었으며, 적은 용량으로도 고품질의 영상 및 음성을 구현할 수 있어서 인터넷을 통한 스트리밍에 자주 활용됨. |
| OGV | .ogg | Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식임. |
| WebM | .webm | 구글의 지원으로 개발된 개방형 공개 멀티미디어 파일 형식으로, 비디오 코덱으로는 VP8, 오디오 코덱으로는 Vorbis를 사용하는 멀티미디어 파일 형식임. |
| AVI | .avi | Microsoft에 의해 개발되었으며, PC에서 동영상을 구현하기 위한 파일 형식임. |
| WMV | .wmv | Microsoft에 의해 개발되었으며, Microsoft windows media player의 주 스트리밍 파일 형식임. |
| QuickTime | .mov | Apple에 의해 개발되었으며, 매킨토시 컴퓨터에 동영상을 지원하기 위하여 개발된 파일 형식임. |
| RealVideo | .rm .ram | Real Networks에 의해 개발되었으며, 스트리밍 기술을 이용한 동영상용 플러그 인 파일 형식임. |
| Flash | .swf .flv | Macromedia에 의해 개발되었으며, 벡터 도형 처리 기반의 애니메이션 제작용 소프트웨어 파일 형식임. |
※ HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV 뿐입니다.
오디오(audio) 파일 형식
대표적인 오디오 파일 형식은 다음과 같습니다.
| 파일 형식 | 파일 확장자 | 설명 |
| WAV | .wav | IBM과 Microsoft에 의해 개발되었으며, 개인용 PC에서 오디오를 재생하기 위한 IBM과 Microsoft의 표준 오디오 파일 형식임. |
| Ogg | .ogg | Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식임. |
| MP3 | .mp3 | Moving Picture Experts Group에 의해 개발되었으며, MPEG-1의 오디오 규격으로 개발된 손실 압축 파일 형식임. |
| MP4 | .mp4 | Moving Picture Experts Group에 의해 개발되었으며, MPEG-4의 일부로 규정된 멀티미디어 컨테이너 파일 형식임. MP4는 비디오 파일 형식이기도 하지만 오디오에서도 사용할 수 있음. |
| MIDI | .mid .midi | 모든 전자 음악기기의 연주 정보를 상호 전달하기 위해 정해진 데이터 전송 규격임. |
| RealAudio | .rm .ram | Real Networks에 의해 개발되었으며, 인터넷에서 실시간으로 음악을 들을 수 있는 스트리밍 사운드 기술임. |
| WMA | .wma | Microsoft에 의해 개발되었으며, Microsoft windows media 기술에서 음악 정보(data)만을 압축하는 기술임. |
| AAC | .aac | Apple에 의해 개발되었으며, iPhone, iPod, iTunes의 기본 오디오 파일 형식임. 표준적인 손실 압축 방식을 사용함. |
※ HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, Ogg 뿐입니다.
비디오
비디오(video) 요소
HTML5 이전에는 웹 페이지에서 비디오(video)를 보여주기 위한 표준안이 없었습니다.
따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했습니다.
하지만 HTML5에서는 <video>태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공합니다.
비디오 요소의 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Multimedia Video</title>
</head>
<body>
<h1>video 요소를 이용한 동영상 삽입</h1>
<video style="width:576px; height:360" controls>
<source src="video_mp4.mp4" type="video/mp4">
<source src="video_ogg.ogg" type="video/ogg">
이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>
</body>
</html>control 속성은 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성합니다.
또한, height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시할 수 있습니다.
웹 브라우저는 여러 개의 <source>태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용합니다.
<video>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <video>태그를 지원하지 않을 때만 화면에 표시됩니다.
autoplay 속성
autoplay 속성은 웹 페이지가 로드(load) 될 때 비디오를 자동으로 재생시켜 줄지 않을지를 설정합니다.
<video style="width:576; height:360" controls autoplay>
<source src="video_mp4.mp4" type="video/mp4">
<source src="video_ogg.ogg" type="video/ogg">
이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>
loop 속성
loop 속성을 설정하면, 비디오의 재생이 끝나도 계속적으로 반복해서 비디오를 재생합니다.
<video style="width:576; height:360" controls loop>
<source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>
<track> 태그
<track>태그는 비디오가 재생될 때 보일 자막이나 캡션 파일을 명시할 때 사용합니다.
<video style="width:576; height:360" controls>
<source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
<track kind="subtitles" src="sample_subtitle_en.vtt" srclang="en" label="English">
<track kind="subtitles" src="sample_subtitle_fr.vtt" srclang="fr" label="Francais">
이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>
kind 속성
kind 속성은 자막 문자열의 타입을 명시하며, srclang 속성은 해당 문자열의 언어 설정을 명시합니다.
label 속성
label 속성은 사용자가 보게 될 라벨을 명시합니다.
HTML5 비디오 파일 형식
앞서 말씀드렸다 싶이, HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV 뿐입니다.
- MP4 : Moving Picture Experts Group에 의해 개발되었으며, 비디오 코덱으로는 H.268, 오디오 코덱으로는 ACC를 사용합니다. 적은 용량으로도 고품질의 영상 및 음성을 구현할 수 있어 인터넷을 통한 스트리밍에 많이 활용되는 파일 형식입니다.
- WebM : 구글의 지원으로 개발된 개방형 공개 멀티미디어 파일 형식이며, 비디오 코덱으로는 VP8, 오디오 코덱으로는 Vorbis를 사용합니다.
- OGV : Theora Ogg라고도 불리며, Xiph 재단에 의해 MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식입니다. 비디오 코덱으로는 Theora, 오디오 코덱으로는 Vorbis를 사용합니다.
HTML5 video 요소
| 요소 | 설명 |
| video | 비디오와 영화 등 비디오 파일을 명시함. |
| source | video 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시함. 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용함. |
| track | 비디오 플레이어에 대한 텍스트 자막을 명시함. |
HTML5 video 속성
| 속성 | 설명 |
| src | 비디오 파일의 경로를 명시함. |
| height | 비디오 파일의 높이를 명시함. |
| width | 비디오 파일의 너비를 명시함. |
| controls | 비디오의 기본적인 동작을 조절할 수 있는 패널를 명시함. |
| autoplay | 비디오의 자동 재생 여부를 명시함. |
| loop | 비디오의 반복 재생 여부를 명시함. |
| poster | 비디오가 아직 준비 중일때 불러올 이미지 파일의 경로를 명시함. |
| preload | 비디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시함. |
오디오
오디오(audio) 요소
HTML5 이전에는 웹 페이지에서 오디오(audio)를 들려주기 위한 표준안이 없었습니다.
따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했습니다.
하지만 HTML5에서는 <audio>태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공합니다.
오디오 요소의 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Multimedia Audio</title>
</head>
<body>
<h1>audio 요소를 이용한 소리 삽입</h1>
<audio controls>
<source src="audio_ogg.ogg" type="audio/ogg">
<source src="audio_mp3.mp3" type="audio/mp3">
이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>
</body>
</html>control 속성은 재생, 정지 및 소리의 조절 등 오디오의 기본적인 동작을 조절할 수 있는 패널을 생성합니다.
웹 브라우저는 여러 개의 <source>태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용합니다.
<audio>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <audio>태그를 지원하지 않을 때만 화면에 표시됩니다.
autoplay 속성
autoplay 속성은 웹 페이지가 로드(load) 될 때 음악을 자동으로 재생시켜 줄지 않을지를 설정합니다.
<audio controls autoplay>
<source src="audio_ogg.ogg" type="audio/ogg">
<source src="audio_mp3.mp3" type="audio/mp3">
이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>
loop 속성
loop 속성을 설정하면 오디오의 재생이 끝나도 계속적으로 반복해서 오디오를 재생합니다.
예제
<audio controls loop>
<source src="audio_ogg.ogg" type="audio/ogg">
<source src="audio_mp3.mp3" type="audio/mp3">
이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>
HTML5 오디오 파일 형식
HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, Ogg 뿐입니다.
- MP3 : Moving Picture Experts Group에 의해 개발되었으며, MPEG-1의 오디오 규격으로 개발된 손실 압축형 파일 형식입니다.
- WAV : IBM과 Microsoft에 의해 개발되었으며, 개인용 PC에서 오디오를 재생하기 위한 IBM과 Microsoft의 표준 오디오 파일 형식입니다.
- Ogg : Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식입니다.
HTML5 audio 요소
| 요소 | 설명 |
| audio | 오디오와 음악 등 오디오 파일을 명시함. |
| source | audio 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시함. 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용함. |
HTML5 audio 속성
| 속성 | 설명 |
| src | 오디오 파일의 경로를 명시함. |
| controls | 오디오의 기본적인 동작을 조절할 수 있는 패널를 명시함. |
| autoplay | 오디오의 자동 재생 여부를 명시함. |
| loop | 오디오의 반복 재생 여부를 명시함. |
| preload | 오디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시함. |
플러그인
플러그인(Plug-in)
HTML 플러그인이란 웹 브라우저의 표준 기능을 확장해 주는 프로그램을 의미합니다.
가장 널리 알려진 플러그인으로는 Java Applet, Flash Player, Pdf Reader 등이 있습니다.
이러한 플러그인은 object 요소나 embed 요소를 사용하여 HTML 문서에 추가할 수 있습니다.
<object data="파일경로/파일이름.pdf" style="width:100%; height:700px"></object>전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Multimedia Plugins</title>
</head>
<body>
<h1>object 요소를 이용한 pdf 파일 삽입</h1>
<object data="/examples/media/sample_plugins_pdf.pdf" style="width:100%; height:700px"></object>
</body>
</html>
embed 요소
embed 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용합니다.
embed 요소는 오래전부터 사용되어 왔지만, HTML5 이전까지는 HTML 표준이 아니었습니다.
이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 HTML 문서를 삽입할 수도 있습니다.
<embed src="/examples/media/sample_plugins_pdf.pdf" style="width:100%; height:700px">
※ embed 요소는 HTML5 이전까지는 HTML 표준이 아니었으므로, HTML5에서는 유효하지만, HTML4에서는 유효하지 않습니다.
[출처] TCPSCHOOL.com
'IT > Web' 카테고리의 다른 글
| HTML 그래픽 - SVG (Scalable Vector Graphics) (0) | 2020.02.11 |
|---|---|
| HTML 그래픽 - Canvas (0) | 2020.02.04 |
| HTML5 에서 추가된 input 요소의 타입 및 속성 (0) | 2020.02.04 |
| HTML5 의미 요소 (0) | 2020.01.31 |
| HTML5 개요 (0) | 2020.01.31 |
댓글