HTML5가 등장하기 이전의 웹 페이지에서는 미디어(오디오, 영상) 등을 삽입하기 위해서는 따로 플러그인을 이용해야 했습니다. 미디어를 위해 플러그인을 따로 삽입한다라는 것은 불편함을 초래했는데요. 이러한 점을 개선하고자 HTML5에서는 미디어와 관련한 태그를 본격적으로 지원하기 시작했습니다.

---

<audio>

<audio>는 오디오 파일을 삽입하는 태그입니다. 효과음이나 배경음을 재생하고 싶을 때 이용합니다. 오디오 파일의 확장자는 mp3가 권장되고 있습니다. <img>태그 처럼 src속성을 통해 오디오 파일이 존재하는 경로를 적어주면 오디오가 삽입됩니다.

<audio>의 속성은 다음과 같습니다.

속성	설명
autoplay	오디오를 자동 재생합니다.
controls	오디오의 컨트롤 바를 표시합니다.
loop	오디오를 반복 재생합니다.
muted	오디오를 재생하지만 음소거를 시킵니다.
preload	재생 버튼을 누르기 전에 미리 오디오 파일을 로드합니다.

아래 코드는 <audio>예제인데, <audio>의 모습을 보여드리기 위해서 controls속성을 추가했습니다.

<audio src='오디오 파일 경로' controls></audio>

---

<video>

<video>태그는 웹 페이지에서 영상을 보여주기 위해서 사용하는 태그입니다. <video>태그의 속성은 <audio>와 동일합니다. 다만 <video>태그는 width, height속성을 따로 지정할 수 있다는 점이 있습니다.

<video src='비디오 파일 경로' controls></video>

---

파일의 확장자 문제와 <source>

미디어 파일들은 다양한 확장자를 가지고 있습니다. 그리고 브라우저도 종류에 따라 서로 다른 미디어 코덱을 사용합니다.(특히 <video>) 그래서 크롬에서 잘 동작하던 미디어가 파이어폭스에서는 동작하지 않을 수도 있습니다. 이런경우 웹 접근성을 향상시키기 위해 <source>라는 태그가 사용됩니다.

여러 확장자의 미디어를 지정하기 위해서는 <audio>, <video>태그와 <source>태그를 같이 사용하면 됩니다. 다음 예제 코드를 보시면 무슨 내용인지 감이 잡히실 것 입니다.

<video>
  <source src='aaa.mp4' type='video/mp4'>
  <source src='aaa.avi' type='video/avi'>
  <source src='aaa.webm' type='video/webm'>
</video>

<source>태그의 속성은 다음과 같습니다.

속성	설명
src	미디어 파일의 경로를 지정합니다.(필수)
type	미디어 파일의 유형을 브라우저에게 알려줍니다.
codecs	비디오의 코덱을 지정합니다.

---

비디오에 자막을 넣는 <track>

<track>태그는 비디오에 자막을 넣는 태그입니다. 비디오에 자막을 삽입한다는 것은 웹 접근성을 향상시키는 방법 중 하나입니다. <track>태그로 외부 자막 파일을 비디오에 삽입할 수 있습니다.

<track kind='자막 종류' src='자막 파일 경로'>

자막 태그의 속성은 다음과 같습니다.

속성	설명
kind	자막의 종류를 지정합니다.
src	자막 파일의 경로를 지정합니다.
srclang	사용 언어를 지정합니다. 언어마다 다른 자막을 사용하는 경우 사용합니다.
label	자막이 여러개일 경우 식별하기 위한 이름을 붙입니다.
default	기본 값으로 사용할 자막을 선택합니다.

kind속성에 자막의 종류를 지정한다고 했는데, 자막의 종류란 다음과 같은 것들이 있습니다.

• subtitle: 일반적인 자막. 이해를 위한 자막이나 번역한 자막이 포함됩니다. kind 속성의 기본 값 입니다.
• captions: 캡션은 청각장애인을 위한 자막이거나, muted 상태에서 이용할 수 있는 자막입니다.
• descritptions: 영상에 대한 설명 자막으로, 영상에는 보이지 않습니다.
• chapters: 영상 탐색을 위한 자막으로, 영상에는 보이지 않습니다.
• metadata: 영상의 정보입니다. 역시 영상에서는 보이지 않습니다.