HTML5 - 멀티미디어(2)

Video 요소

HTML5 VIDEO 요소는 웹 문서에서 비디오를 재생할 수 있는 미디어 플레이어를 내장하는 HTML 요소입니다. <video> 요소를 사용하여 비디오 뿐만 아니라 오디오 콘텐츠도 표시할 수 있습니다. 

---

Video 요소의 속성

• src : 비디오 파일의 경로를 지정합니다.
• width : 비디오 플레이어의 너비를 지정합니다.
• height : 비디오 플레이어의 높이를 지정합니다.
• controls : 비디오 플레이어에 재생, 일시 정지, 볼륨 조절 등의 컨트로를 버튼을 표시합니다.
• autoplay : 페이지 로딩 후 비디오가 자동으로 재생되도록 설정합니다.
• poster : 비디오가 로딩되기 전에 보여줄 이미지를 지정합니다.
• loop : 비디오가 자동으로 반복 재생되도록 설정합니다.
• track : 비디오가 재생될 때 보일 자막이나 캡션 파일을 설정합니다.

<video id="myVideo" width="640" height="480" controls autoplay muted loop poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track src="captions.vtt" kind="captions" label="Korean" srclang="ko">
  Your browser does not support the video tag.
</video>

이 코드를 사용하면 비디오 파일을 특정 너비와 높이로 표시하며, 사용자는 컨트롤 버튼을 사용하여 비디오를 제어할 수 있습니다. 또한 페이지가 로드될 때 자동으로 비디오가 재생되고, 비디오 로딩 중에는 포스터 이미지가 표시됩니다.

 

---

HTML5 비디오 파일 형식

HTML5는 다양한 비디오 파일 형식을 지원합니다. HTML5에서 지원하는 주요 비디오 파일 형식은 다음과 같습니다

• MP4 (MPEG-4 파트 14): MP4는 HTML5에서 가장 널리 지원되는 비디오 형식 중 하나입니다. MP4 파일은 H.264 비디오 코덱과 AAC 오디오 코덱을 사용하여 압축됩니다.
• WebM: WebM은 VP8 또는 VP9 비디오 코덱과 Opus 또는 Vorbis 오디오 코덱을 사용하는 개방형 미디어 형식입니다. WebM 형식은 HTML5에서 지원되며, 브라우저 간의 호환성이 높습니다.
• Ogg: Ogg 형식은 Theora 비디오 코덱과 Vorbis 오디오 코덱을 사용하는 개방형 미디어 형식입니다. HTML5에서 지원되지만, 브라우저 간 호환성이 다소 낮을 수 있습니다.

위의 형식들은 HTML5 <video> 요소에서 <source> 요소를 사용하여 지정할 수 있습니다. <source> 요소는 다양한 비디오 파일을 지정하여 브라우저가 지원하는 첫 번째 형식을 사용할 수 있도록 합니다. 브라우저는 첫 번째로 인식하는 형식을 사용하여 비디오를 재생합니다. 그 외에도 브라우저에서 인식 가능한 다른 비디오 형식을 지원할 수 있습니다. 

 

HTML5는 위에서 언급된 형식 외에도 다른 비디오 형식을 지원할 수 있습니다. 브라우저는 HTML5 표준에 따라 비디오 형식을 지원하도록 개발되며, 지원하는 형식은 브라우저 제작사에 따라 다를 수 있습니다. 따라서 모든 브라우저에서 모든 비디오 형식을 지원하는 것은 아닙니다. 하지만 MP4, WebM, Ogg는 HTML5에서 널리 지원되는 형식으로 사용됩니다.

 

HTML5의 비디오 지원은 계속 발전하고 있으므로, 최신 브라우저의 문서와 기술 사양을 참고하여 지원되는 형식을 확인하는 것이 좋습니다.

 

 

---

Audio 요소

<audio> 요소는 웹 페이지에서 오디오 파일을 재생하는 데 사용됩니다.

---

Audio 요소 속성

• controls : 재생, 일시정지 및 볼륨과 같은 오디오 컨트롤을 추가합니다.
• src : 재상할 오디오 파일의 소스 URL을 지정합니다.
• type : 오디오 파일의 형식을 지정합니다. 일반적으로 "audio/mpeg" 또는 "audio/ogg" 형식을 사용합니다.
• autoplay : 페이지 로딩 시 오디오 파일을 자동으로 시작하도록 설정합니다.
• muted : 오디오를 음소거 상태로 설정합니다.

<audio controls autoplay muted>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  브라우저가 오디오 요소를 지원하지 않습니다.
</audio>

위 예시 코드는  controls 속성으로 재생 컨트롤을 추가하고, autoplay 속성으로 자동 재생을 설정하며, muted 속성으로 음소거 상태로 설정합니다. <source> 요소를 사용하여 두 가지 다른 오디오 파일 형식(ogg 및 mp3)을 지정하고, 브라우저가 지원하는 첫 번째 형식을 사용합니다. 마지막으로, 브라우저가 오디오 요소를 지원하지 않을 경우 표시할 메시지를 제공합니다.

 

---

HTML5 오디오 파일 형식

HTML5는 다양한 오디오 파일 형식을 지원합니다. 브라우저마다 지원하는 오디오 파일 형식이 다르지만 대표적인 오디오 파일 형식은 아래와 같습니다.

• MP3 : Moving Picture Experts Group에 의해 개발되었으며, MPEG-1의 오디오 규격으로 개발된 손실 압축형 파일 형식입니다.
• Ogg Vorbis : Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식입니다.
• WAV : IBM과 Microsoft에 의해 개발되었으며, 개인용 PC에서 오디오를 재생하기 위한 IBM과 Microsoft의 표준 오디오 파일 형식입니다.