HTML 강좌 / audio, video, iframe으로 미디어와 외부 콘텐츠 삽입하기

HTML 강좌

HTML에서는 audio와 video로 미디어 파일을 재생하고, iframe으로 다른 페이지의 콘텐츠를 삽입할 수 있습니다. 파일 경로, 대체 안내, 자막, 외부 콘텐츠의 신뢰성과 접근성을 함께 고려해야 합니다.

audio와 video로 파일 재생하기

다음 예제는 HTML 파일과 같은 폴더에 sample.mp3, sample.mp4, sample-poster.webp가 있다고 가정합니다. 실제로 실행하려면 사용할 권리가 있는 파일을 준비하고 파일명을 코드에 맞추세요.

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

<video controls width="640" height="360" poster="sample-poster.webp">
  <source src="sample.mp4" type="video/mp4">
  <track src="sample-ko.vtt" kind="captions" srclang="ko"
         label="한국어 자막" default>
  이 브라우저는 비디오 재생을 지원하지 않습니다.
</video>

controls는 재생·일시정지 등의 기본 조작 화면을 제공합니다. poster는 동영상 재생 전 보이는 이미지입니다. 대사가 있거나 중요한 소리가 담긴 동영상이라면 정확한 자막 파일을 마련하세요. 예제의 sample-ko.vtt는 실제 파일을 만들거나 준비해야 합니다. 파일이 없으면 자막은 표시되지 않습니다.

자막 파일은 UTF-8 텍스트로 저장하는 WebVTT 형식을 사용할 수 있습니다. 예를 들어 아래 내용을 sample-ko.vtt로 저장하면 첫 3초 동안 자막 한 줄을 표시하는 기본 구조가 됩니다. 실제 동영상에는 말과 중요한 소리를 빠짐없이 옮기고 시간도 영상에 맞춰 조정해야 합니다.

WEBVTT

00:00:00.000 --> 00:00:03.000
작은 정원에 오신 것을 환영합니다.

오디오의 내용이 중요한 경우에는 재생 도구만 제공하지 말고 글로 된 대본도 준비하세요. 자동 재생은 사용자가 예상하지 못한 소리를 낼 수 있으므로 예제처럼 직접 재생하게 두는 편이 안전합니다. 여러 형식을 제공할 때는 source를 추가할 수 있지만, 확장자만 바꾼 같은 파일은 호환 형식이 되지 않습니다.

iframe으로 외부 콘텐츠 삽입하기

iframe은 다른 문서를 현재 페이지 안에 표시합니다. 다음 주소는 예시이며, 실제 서비스가 제공하는 공식 임베드 주소로 바꿔야 합니다.

<iframe
  src="https://example.com/embed/example"
  title="예제 콘텐츠 소개"
  width="640" height="360"
  loading="lazy"></iframe>

title은 삽입된 프레임의 목적을 설명합니다. 외부 사이트가 임베드를 허용하지 않으면 주소가 맞아도 표시되지 않을 수 있습니다. 외부 콘텐츠는 개인정보·쿠키·성능에 영향을 줄 수 있으므로 신뢰할 수 있는 제공자의 공식 임베드 코드를 확인하고 필요한 범위에서만 사용하세요.

example.com 주소는 동작하는 동영상 서비스가 아니라 코드 구조를 보여 주기 위한 자리표시자입니다. 임베드가 보이지 않는다고 해서 iframe 태그가 틀린 것은 아닐 수 있습니다. 실제 제공자의 임베드 주소와 허용 정책을 먼저 확인하세요. 삽입된 콘텐츠가 없어도 핵심 정보를 알 수 있도록 주변 본문에 제목과 맥락을 적는 것이 좋습니다.