멀티미디어와 임베드

오늘날 웹은 글과 이미지를 넘어 오디오와 영상을 자연스럽게 다룹니다. 플러그인 없이도 브라우저가 직접 재생할 수 있습니다. 이번 강의에서는 audio, video, 그리고 외부 콘텐츠를 넣는 iframe을 배웁니다.

학습 목표

• audio로 소리를 재생한다.
• video로 영상을 재생하고 옵션을 설정한다.
• source로 여러 형식을, track으로 자막을 제공한다.
• iframe으로 외부 콘텐츠를 안전하게 임베드한다.

오디오

audio 태그에 controls를 붙이면 재생 컨트롤이 나타납니다.

<audio controls>
  <source src="/audio/song.mp3" type="audio/mpeg" />
  <source src="/audio/song.ogg" type="audio/ogg" />
  이 브라우저는 오디오를 지원하지 않습니다.
</audio>

태그 사이의 텍스트는 브라우저가 오디오를 지원하지 않을 때 표시되는 대체 내용입니다.

비디오

video도 비슷하지만 width, height, poster(재생 전 미리보기 이미지) 등을 추가로 가집니다.

<video controls width="640" poster="/images/preview.jpg">
  <source src="/video/intro.mp4" type="video/mp4" />
  <source src="/video/intro.webm" type="video/webm" />
  영상을 재생할 수 없습니다.
</video>

⚠️ 주의 — 대부분의 브라우저는 소리가 있는 autoplay를 차단합니다. 자동 재생이 필요하면 muted를 함께 지정해야 동작합니다.

source로 여러 형식

source를 여러 개 두면 브라우저가 지원하는 첫 번째 형식을 선택합니다. 형식별 호환성이 다르므로 mp4와 webm을 함께 제공하면 더 넓은 환경을 지원할 수 있습니다.

💡 TIP — source는 위에서부터 평가됩니다. 더 효율적인 형식(예: webm)을 위에, 호환성이 넓은 형식(mp4)을 아래에 두는 전략이 흔합니다.

track으로 자막

track은 영상에 자막이나 설명을 추가합니다. 접근성과 검색 모두에 도움이 됩니다.

<video controls src="/video/lecture.mp4">
  <track
    kind="subtitles"
    src="/captions/ko.vtt"
    srclang="ko"
    label="한국어"
    default
  />
</video>

자막 파일은 보통 .vtt(WebVTT) 형식을 사용합니다. default를 붙이면 기본으로 켜집니다.

iframe으로 임베드

iframe은 다른 페이지나 외부 콘텐츠(지도, 동영상 플랫폼 등)를 현재 페이지 안에 끼워 넣습니다.

<iframe
  src="https://www.youtube.com/embed/abc123"
  width="560"
  height="315"
  title="소개 영상"
  loading="lazy"
  allowfullscreen
></iframe>

⚠️ 주의 — iframe은 외부 콘텐츠를 불러오므로 신뢰할 수 있는 출처만 사용하고, 접근성을 위해 title을 반드시 지정하세요. loading="lazy"를 쓰면 화면에 보일 때 불러와 초기 로딩이 빨라집니다.

요약

• audio, video에 controls를 붙여 재생 UI를 제공합니다.
• 여러 source로 형식별 호환성을 넓힙니다.
• track으로 자막을 제공해 접근성을 높입니다.
• autoplay는 보통 muted와 함께여야 동작합니다.
• iframe은 외부 콘텐츠 임베드용이며 title이 필요합니다.

연습문제

1. mp3와 ogg 두 형식을 제공하는 오디오 플레이어를 작성하세요.
2. 미리보기 이미지가 있는 비디오를 작성하세요.
3. 영상에 한국어 자막을 기본으로 켜지도록 추가하세요.
4. 유튜브 영상을 iframe으로 접근성을 고려해 임베드하세요.

힌트 — 비디오 미리보기는 poster, 자막 기본 표시는 default입니다.