9. HTML5 멀티미디어

1. 키워드

멀티미디어(Multimedia)
비디오(Video)
오디오(Audio)
플러그인(Plug-in)

2. 멀티미디어 파일 형식

HTML5 이전까지는 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리해 왔다.
하지만 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단히 사용할 수 있게 되었다.

웹 브라우저는 파일의 타입(Type)을 파일의 확장자로 판단한다.
만약에 확장자가 .html인 파일을 보면, 웹 브라우저는 이 파일을 HTML 파일로써 다루게 될 것이다.

비디오나 사운드와 같은 멀티미디어 요소들은 멀티미디어 파일에 저장된다.
이와 같은 멀티미디어 파일도 다음과 같이 다양한 파일 형식으로 저장될 수 있다.

1) 비디오 파일 형식

대표적인 비디오 파일 형식은 다음과 같다.

파일 형식	파일 확장자	설명
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에 의해 개발되었으며, 벡터 도형 처리 기반의 애니메이션 제작용 소프트웨어 파일 형식임.

Note

HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV이다.

2) 오디오 파일 형식

대표적인 오디오 파일 형식은 다음과 같다.

파일 형식	파일 확장자	설명
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 기술에서 음악 정보만을 압축하는 기술임.
AAC	`.aac`	Apple에 의해 개발되었으며, iPhone, iPod, iTunes의 기본 오디오 파일 형식임. 표준적인 손실 압축 방식을 사용함.

Note

HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAC, Ogg이다.

3. 비디오

HTML5 이전에는 웹 페이지에서 비디오를 보여주기 위한 표준안이 없었다.
따라서 비디오를 삽입하기 위해서는 플래시와 같은 외부 플러그인에 의존해야만 했다.
하지만 HTML5에서는 <video> 태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공한다.

1) 비디오 요소의 속성

<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" />
  이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>

control 속성은 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성한다.
또한, height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시할 수 있다.

웹 브라우저는 여러 개의 <source> 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용한다.
<video> 태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <video> 태그를 지원하지 않을 때만 화면에 표시된다.

autoplay 속성은 웹 페이지가 로드(Load) 될 때 비디오를 자동으로 재생시켜 줄지 않을지를 설정한다.

<video style="width: 576; height: 360" controls autoplay>
  <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4" />
  <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg" />
  이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>

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> 태그는 비디오가 재생될 때 보일 자막이나 캡션 파일을 명시할 때 사용한다.

<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 속성은 자막 문자열의 타입을 명시하며, srclang 속성은 해당 문자열의 언어 설정을 명시한다.
label 속성은 사용자가 보게 될 라벨을 명시한다.

2) HTML5 `video` 요소

요소	설명
`video`	비디오와 영화 등 비디오 파일을 명시함.
`source`	`video` 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시함. 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용함.
`track`	비디오 플레이어에 대한 텍스트 자막을 명시함.

3) HTML5 `video` 속성

속성	설명
`src`	비디오 파일의 경로를 명시함.
`height`	비디오 파일의 높이를 명시함.
`width`	비디오 파일의 너비를 명시함.
`controls`	비디오의 기본적인 동작을 조절할 수 있는 패널를 명시함.
`autoplay`	비디오의 자동 재생 여부를 명시함.
`loop`	비디오의 반복 재생 여부를 명시함.
`poster`	비디오가 아직 준비 중일때 불러올 이미지 파일의 경로를 명시함.
`preload`	비디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시함.

4. 오디오

HTML5 이전에는 웹 페이지에서 오디오를 들려주기 위한 표준안이 없었다.
따라서 비디오를 삽입하기 위해서는 플래시와 같은 외부 플러그인에 의존해야만 했다.
하지만 HTML5에서는 <audio> 태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공한다.

1) 오디오 요소의 속성

<audio controls>
  <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg" />
  <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3" />
  이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>

control 속성은 재생, 정지 및 소리의 조절 등 오디오의 기본적인 동작을 조절할 수 있는 패널을 생성한다.

웹 브라우저는 여러 개의 <source> 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용한다.
<audio> 태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <audio> 태그를 지원하지 않을 때만 화면에 표시된다.

autoplay 속성은 웹 페이지가 로드(Load) 될 때 음악을 자동으로 재생시켜 줄지 않을지를 설정한다.

<audio controls autoplay>
  <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg" />
  <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3" />
  이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>

loop 속성을 설정하면 오디오의 재생이 끝나도 계속적으로 반복해서 오디오를 재생한다.

<audio controls loop>
  <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg" />
  <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3" />
  이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>

2) HTML5 `audio` 요소

요소	설명
`audio`	오디오와 음악 등 오디오 파일을 명시함.
`source`	`audio` 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시함. 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용함.

3) HTML5 `audio` 속성

속성	설명
`src`	오디오 파일의 경로를 명시함.
`controls`	오디오의 기본적인 동작을 조절할 수 있는 패널를 명시함.
`autoplay`	오디오의 자동 재생 여부를 명시함.
`loop`	오디오의 반복 재생 여부를 명시함.
`preload`	오디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시함.

5. 플러그인

HTML 플러그인이란 웹 브라우저의 표준 기능을 확장해 주는 프로그램을 의미한다.
가장 널리 알려진 플러그인으로는 Java Applet, Flash Player, Pdf Reader 등이 있다.
이러한 플러그인은 object 요소나 embed 요소를 사용하여 HTML 문서에 추가할 수 있다.

1) `object` 요소

object 요소는 HTML 문서에 삽입할 객체(Object)를 명시하는데 사용한다.
이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 또 다른 HTML 문서를 삽입할 수도 있다.

<object
  data="/examples/media/sample_plugins_pdf.pdf"
  style="width: 100%; height: 700px"
></object>

또한, object 요소는 이미지를 삽입할 때에도 사용할 수 있다.

<object data="/examples/images/img_flower.png"></object>

2) `embed` 요소

embed 요소는 HTML 문서에 삽입할 객체(Object)를 명시하는데 사용한다.
embed 요소는 오래전부터 사용되어 왔지만, HTML5 이전까지는 HTML 표준이 아니었다.
이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 HTML 문서를 삽입할 수도 있다.

<embed
  src="/examples/media/sample_plugins_pdf.pdf"
  style="width: 100%; height: 700px"
/>

또한, embed 요소는 이미지를 삽입할 때에도 사용할 수 있다.

<embed
  src="/examples/images/img_flower.jpg"
  style="width: 350px; height: 263px"
/>

Note

embed 요소는 HTML5 이전까지는 HTML 표준이 아니었으므로, HTML5에서는 유효하지만, HTML4에서는 유효하지 않다.

9. HTML5 멀티미디어

1. 키워드

2. 멀티미디어 파일 형식

1) 비디오 파일 형식

2) 오디오 파일 형식

3. 비디오

1) 비디오 요소의 속성

2) HTML5 video 요소

3) HTML5 video 속성

4. 오디오

1) 오디오 요소의 속성

2) HTML5 audio 요소

3) HTML5 audio 속성

5. 플러그인

1) object 요소

2) embed 요소

References

2) HTML5 `video` 요소

3) HTML5 `video` 속성

2) HTML5 `audio` 요소

3) HTML5 `audio` 속성

1) `object` 요소

2) `embed` 요소